Rehefa mianatra ny fitsipiky ny CSS fototra, dia ampianarina manoratra fomba modular, azo ampiasaina, ary famaritana mba hiantohana ny fikojakojana. Saingy rehefa tafiditra amin'ny rindranasan'izao tontolo izao ny mpamorona, dia matetika tsy azo atao ny manampy ny endri-javatra UI raha tsy misy fomba mitete any amin'ny faritra tsy noeritreretina. Ity olana ity dia matetika mitsambikina amin'ny tsipika mameno ny tenany; manomboka miseho any amin'ny toerana tsy misy azy ireo fomba izay mivelatra ara-teorika amin'ny singa na kilasy iray. Izany dia manery ny mpamorona hamorona mpifidy manokana kokoa hanesorana ireo endrika tafaporitsaka, izay manafoana tsy nahy ireo endrika manerantany, sy ny sisa. Fivoriamben'ny anaran'ny kilasy henjana, toy ny BEM, no vahaolana ara-teorika amin'ity olana ity. Ny fomba fiasa BEM (Block, Element, Modifier) dia fomba iray amin'ny anaran'ny kilasy CSS mba hiantohana ny fampiasana sy ny rafitra ao anatin'ny rakitra CSS. Mety hampihena ny enta-mavesatry ny saina amin'ny alàlan'ny fampiasana fiteny sehatra hamaritana ireo singa sy ny toerany ny fanomezana anarana fifanarahana toy izany, ary raha ampiharina tsara dia mety hanamora ny fitazonana ny fomba ho an'ny fampiharana lehibe. Ao amin'ny tontolo tena izy anefa dia tsy mandeha toy izany foana. Mety hiova ny laharam-pahamehana, ary miaraka amin'ny fanovana dia lasa tsy mifanaraka ny fampiharana. Ny fiovana kely amin'ny firafitry HTML dia mety mitaky fanovana anarana kilasy CSS maro. Miaraka amin'ny fampiharana eo amin'ny lafiny anoloana be interactive, ny anaran'ny kilasy manaraka ny lamina BEM dia mety ho lasa lava sy sarotra (ohatra, app-user-overview__status--is-authenticating), ary ny tsy fanarahana tanteraka ny fitsipiky ny anarana dia mandrava ny rafitry ny rafitra, ka manafoana ny tombotsoany. Raha jerena ireo fanamby ireo, dia tsy mahagaga raha nitodika tany amin'ny frameworks ny mpamorona, Tailwind no rafitra CSS malaza indrindra. Raha tokony hiezaka hiady amin'izay toa ady manokana tsy azo resena eo amin'ny fomba, dia mora kokoa ny miala amin'ny CSS Cascade ary mampiasa fitaovana izay miantoka ny fitokanana tanteraka. Miantehitra bebe kokoa amin'ny Utilities ny mpamorona Ahoana no ahafantarantsika fa ny developer sasany dia te hiala amin'ny fomba cascaded? Izany dia ny fiakaran'ny fitaovana "maoderina" eo anoloana - toy ny CSS-in-JS frameworks - natao manokana ho an'io tanjona io. Ny fiasana amin'ny fomba mitoka-monina izay mifanitsy amin'ny singa manokana dia mety ho toy ny fofon'aina. Manaisotra ny filana manonona zavatra izy io - mbola iray amin'ireo asa faran'izay ankahalaina sy mandany fotoana - ary mamela ny mpamorona hamokatra nefa tsy mahafantatra na mampiasa ny tombotsoan'ny lova CSS. Fa ny fanesorana ny CSS Cascade dia tonga miaraka amin'ny olany manokana. Ohatra, ny famoronana styles amin'ny JavaScript dia mitaky fanamboarana mavesatra ary matetika mitarika ho amin'ny fomba tsy misy dikany mifangaro amin'ny marika singa na HTML. Raha tokony hojerena tsara ireo fifanarahana anarana, dia avelanay hamorona fitaovana hamokatra ho azy ireo mpifidy sy mpamantatra ho anay (oh : .jsx-3130221066), mitaky ny mpamorona mba hanaraka ny fiteny pseudo hafa ao anatiny sy ho azy. (Toy ny hoe mbola tsy ampy ny enta-mavesatry ny fahatakarana ny zavatra ataon'ny singanao rehetra!) Ny fametahana bebe kokoa ny asa amin'ny fanomezana anarana kilasy ho fitaovana dia midika fa ny debugging fototra dia matetika voaterina amin'ny dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-dikan-kadikan-davenona, fa tsy ny fampiasana ny endri-tsarimihetsika teratany izay manohana ny debugging mivantana, toy ny Developer Tools. Toy ny hoe mila manamboatra fitaovana handrafetana ireo fitaovana ampiasaintsika isika mba handinihana izay efa omen'ny tranonkala — izany rehetra izany dia noho ny fandosirana ny "fanaintainana" amin'ny fanoratana CSS mahazatra. Soa ihany fa ny endri-javatra CSS maoderina dia tsy vitan'ny hoe mahatonga ny fanoratana CSS manara-penitra ho mora kokoa fa manome hery lehibe kokoa ho an'ny mpamorona toa antsika koa hitantana ny cascade sy hampahomby azy ho antsika. Ohatra tsara ny CSS Cascade Layers, saingy misy endri-javatra iray hafa izay tsy mahasarika ny saina - na dia miova aza izany amin'izao fotoana izao dia lasa mifanaraka amin'ny Baseline. Ny CSS @scope At-Rule Heveriko fa ny CSS @scope at-rule dia mety ho fanafodiny ho an'ny karazana fanahiana ateraky ny fomba resabe, izay tsy manery antsika hampandefitra ny tombotsoan'ny tranonkala ho an'ny abstractions sy ny fitaovana fananganana fanampiny. "Ny @scope CSS at-rule dia ahafahanao mifantina singa ao amin'ny zana-kazo DOM manokana, mikendry ireo singa tsy misy manoratra ireo mpifidy voafaritra manokana izay sarotra fehezina, ary tsy mampifandray ireo mpifidy anao amin'ny rafitra DOM." - MDN
Raha lazaina amin'ny teny hafa, afaka miasa miaraka amin'ny fomba mitoka-monina isika amin'ny toe-javatra manokana nefa tsy manao sorona ny lova, na ny fisarahana, na ny fisarahan'ny olana fototra.izay no foto-kevitra nitari-dalana hatry ny ela ho an'ny fampandrosoana eo anoloana. Ankoatr'izay, manana fandrakofana navigateur tena tsara izy io. Raha ny marina, ny Firefox 146 dia nanampy fanohanana ho an'ny @scope tamin'ny volana Desambra, ka nahatonga azy ho mifanaraka amin'ny Baseline voalohany. Ity misy fampitahana tsotra eo amin'ny bokotra mampiasa ny lamina BEM sy ny fitsipika @scope:
Ny fitsipika @scope dia mamela ny fahitsiana tsy dia sarotra loatra. Tsy mila mamorona sisintany amin'ny anaran'ny kilasy intsony ny mpamorona, izay mamela azy ireo hanoratra mpifidy mifototra amin'ny singa HTML teratany, ka manafoana ny filana ny anaran'ny kilasy CSS. Amin'ny alàlan'ny fanesorana fotsiny ny filana fitantanana ny anaran'ny kilasy, @scope dia afaka manamaivana ny tahotra mifandray amin'ny CSS amin'ny tetikasa lehibe.
Fampiasana fototra
Hanombohana, ampio ny fitsipika @scope ao amin'ny CSS-nao ary ampidiro ny fakafantenana ho an'ny karazana:
@faritra (
Noho izany, ohatra, raha toa ka mametaka styles amin'ny singa
@scope (nav) { a { /* Fomba rohy ao anatin'ny sahan'ny nav */ }
a: active { /* Fomba rohy mavitrika */ }
a:active::alohan'ny { /* Rohy mavitrika miaraka amin'ny singa pseudo ho an'ny fanaingoana fanampiny */ }
@media (sakany ambony indrindra: 768px) { a { /* Fanitsiana mamaly */ } } }
Izany, amin'ny tenany manokana, dia tsy singa fototra. Na izany aza, ny tohan-kevitra faharoa dia azo ampiana amin'ny sehatra mba hamoronana sisintany ambany kokoa, mamaritra tsara ny teboka fanombohana sy fiafaran'ny sehatra.
/* Ny singa rehetra ao anatin'ny ul dia tsy hanana ny style ampiasaina */ @scope (nav) mankany (ul) { a { haben'ny endri-tsoratra: 14px; } }
Ity fomba fanao ity dia antsoina hoe donut scoping, ary misy fomba maro azo ampiasaina, ao anatin'izany ny andian-tsafidy mitovitovy sy voafaritra tsara mifamatotra amin'ny rafitra DOM, a: tsy pseudo-selector, na manendry anarana kilasy manokana amin'ny singa ao anatin'ny
Fehiny Ny rafitra CSS voalohany ampiasaina, toy ny Tailwind, dia miasa tsara ho an'ny prototyping sy tetikasa kely kokoa. Mihena haingana anefa ny tombontsoan'izy ireo, rehefa ampiasaina amin'ny tetikasa lehibe kokoa misy mpamorona roa. Nihabetsaka ny fivoaran'ny front-end tato anatin'ny taona vitsivitsy, ary ny CSS dia tsy misy afa-tsy. Na dia tsy fanafodin'ny rehetra aza ny fitsipika @scope, dia mety hampihena ny filana fitaovana sarotra izany. Rehefa ampiasaina ho solon'ny, na miaraka amin'ny anaran'ny kilasy stratejika, @scope dia afaka manamora sy mahafinaritra kokoa ny fanoratana CSS azo tazonina. Famakiana fanampiny
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Fanamarihana famoahana Firefox 146 (Firefox) Fanohanana navigateur (CanIUse) Frameworks CSS malaza (Fanjakan'ny CSS 2024) "Ny "C" ao amin'ny CSS: Cascade", Thomas Yip (CSS-Tricks) Fampidirana BEM (Mahazoa BEM)
