Fa motho a ithuta melaometheo ya CSS ya motheo, o rutwa go kwala ditaele tsa dimojule, tse di ka dirisiwang gape le tse di tlhalosang go tlhomamisa gore di kgona go tlhokomelwa. Mme fa batlhami ba nna le seabe mo ditirisong tsa mmatota, gantsi go utlwala go sa kgonege go oketsa dikarolo tsa UI kwantle ga gore ditaele di dutlele mo mafelong a a sa ikaelelwang. Kgang eno gantsi e nna dibolo tsa kapoko go nna loop e e ikgotsofatsang; ditaele tse di tsenngwang mo elementeng e le nngwe kgotsa mo setlhopheng se le sengwe di simolola go bonala fa di sa tshwanelang teng. Sena se qobella developer indonesia ho bōpa esita le ho feta tse tobileng selectors ho feta mefuta e dutlang, e leng ka nako eo ka phoso feta mefuta ea lefatše, joalo-joalo. Dikopano tsa maina a setlhopha tse di gagametseng, tse di jaaka BEM, ke tharabololo nngwe ya kgopolo ya kgang eno. Mokgwa wa BEM (Block, Elemente, Modifier) ke tsela e e rulagantsweng ya go naya ditlhopha tsa CSS maina go netefatsa gore di ka dirisiwa gape le gore di na le popego mo teng ga difaele tsa CSS. Ho reha dikopano tse kang ena ho ka fokotsa mojaro wa tlhaloganyo ka ho sebedisa puo ya domeine ho hlalosa dikarolo le boemo ba tsona, mme haeba di kenngwa tshebetsong hantle, ho ka etsa hore ditaele tsa dikopo tse kgolo di be bonolo ho di boloka. Le fa go ntse jalo, mo lefatsheng la mmatota, ga se ka metlha go tsamayang jalo. Ditlapele di ka fetoga, mme ka phetogo, tiragatso e nna e e sa tlhomamang. Diphetogo tse dinnye mo sebopegong sa HTML di ka tlhoka dipoeletso tse dintsi tsa leina la tlelase ya CSS. Ka ditiriso tse di dirisanang thata tsa kwa pele, maina a ditlhopha a a latelang mokgwa wa BEM a ka nna maleele e bile a sa kgone go dirisiwa (ka sekai, app-user-overview__status--is-authenticating), mme go sa latele melao ya go naya maina ka botlalo go roba popego ya tsamaiso, ka jalo go ganetsa melemo ya yone. Ka ntlha ya dikgwetlho tseno, ga go gakgamatse go bo batlhami ba retologetse kwa matlhomesong, Tailwind e le letlhomeso le le ratiwang thata la CSS. Go na le go leka go lwantsha se se lebegang e le ntwa ya go tlhomamisa e e sa fenngweng fa gare ga ditaele, go bonolo go tlogela CSS Cascade le go dirisa didirisiwa tse di netefatsang go itlhaola ka botlalo. Batlhabolodi ba Ikaega thata ka Ditiriso Re itse jang gore batlhami bangwe ba tlhoafaletse go tila ditaele tsa cascade? Ke go tlhagelela ga didirisiwa tsa “segompieno” tsa kwa pele — jaaka matlhomeso a CSS-in-JS — a a diretsweng boikaelelo joo ka tlhamalalo. Go dira ka ditaele tse di kgaoganeng tse di tseneletseng mo dikarolong tse di rileng go ka lebega e kete ke go hema mowa o o phepa. E tlosa tlhokeho ya ho reha dintho mabitso — e ntse e le e nngwe ya mesebetsi e hloilweng ka ho fetisisa le e jang nako ya pele — mme e letla bahlahisi ho ba le ditholwana ntle le ho utlwisisa ka botlalo kapa ho sebedisa melemo ya boswa ba CSS. Empa ho ntsha CSS Cascade ho tla le mathata a yona. Ka sekai, go tlhama ditaele ka JavaScript go tlhoka dithulaganyo tse di bokete tsa go aga mme gantsi go dira gore ditaele di tlhakane ka tsela e e sa siamang le go tshwaya dikarolo kgotsa HTML. Mo boemong jwa go akanyetsa ka kelotlhoko ditumalano tsa go naya maina, re letla didirisiwa tsa go aga go re itirela ditlhophi le ditshupo (ka sekai, .jsx-3130221066), go tlhoka gore batlhami ba tsamaisane le puo e nngwe gape ya maaka ka boyone. (Jaaka e kete morwalo wa tlhaloganyo wa go tlhaloganya se useEffects tsotlhe tsa karolo ya gago e se dirang o ne o sa ntse o sa lekana!) Go tswelela go ntsha tiro ya go naya ditlhopha maina go dirisa didirisiwa go raya gore go tlhotlhomisa diphoso ga motheo gantsi go lekanyediwa go mefuta e e rileng ya tiriso e e kokoantsweng go tlhabololwa, go na le go dirisa dikarolo tsa sebatli sa naga tse di tshegetsang go tlhotlhomisa diphoso ka tlhamalalo, jaaka Didirisiwa tsa Motlhabolodi. Go batlile go tshwana le fa re tlhoka go tlhama didirisiwa tsa go baakanya diphoso tsa didirisiwa tse re di dirisang go ntsha se webo e setseng e se naya — tsotlhe ka ntlha ya go tshaba “botlhoko” jwa go kwala CSS e e tlwaelegileng. Ka lesego, dikarolo tsa segompieno tsa CSS ga di dire fela gore go kwala CSS e e tlwaelegileng go nne le maemo a a fetofetogang mme gape di naya batlhami ba ba tshwanang le rona maatla a mantsi a go laola cascade le go dira gore e re berekele. CSS Cascade Layers ke sekai se segolo, mme go na le karolo e nngwe e e sa tlhokomelweng ka tsela e e gakgamatsang — le fa seo se fetoga jaanong ka e sa tswa go tsamaisana le Baseline. Molao wa CSS @sekopo Ke tsaya CSS @scope at-rule e le kalafi e e ka nnang teng ya mofuta wa tlhobaelo e e bakiwang ke go dutla ga setaele e re e akareditseng, e e sa re pateletseng go senya melemo ya webo ya naga ya ditshwantsho le didirisiwa tse di oketsegileng tsa go aga. “Molao wa @scope CSS at-rule o go kgontsha go tlhopha dielemente mo ditlharengpotlana tse di rileng tsa DOM, o lebile dielemente ka nepo kwantle ga go kwala ditlhophi tse di rileng thata tse go leng thata go di tlola, le kwantle ga go kopanya ditlhophi tsa gago thata le popego ya DOM.”— MDN
Ka mantswe a mang, re ka sebetsa ka mefuta e arohaneng maemong a itseng ntle le ho lahla boswa, ho latelana, kapa esita le karohano ya motheo ya matshwenyeho .e e ntseng e le molaomotheo o o kaelang wa tlhabololo ya kwa pele ka nako e telele.
Gape, e na le kgaso e e siameng thata ya sebatli. Tota e bile, Firefox 146 e ne ya oketsa tshegetso ya @scope ka Sedimonthole, mme ya dira gore e tsamaisane le Baseline lekgetlo la ntlha. Fano go na le papiso e e bonolo fa gare ga konopo e e dirisang paterone ya BEM fa e bapisiwa le molao wa @scope:
Molao wa @scope o letla go dira dilo ka nepo ka go sa raraane thata. Motlhabolodi ga a tlhole a tlhoka go tlhama melelwane a dirisa maina a setlhopha, se, ka fa letlhakoreng le lengwe, se ba letlang go kwala ditlhophi tse di theilweng mo dielemente tsa HTML tsa naga, ka jalo go fedisa tlhokego ya dipaterone tsa maina a setlhopha sa CSS tse di laetsweng. Ka go tlosa fela tlhokego ya taolo ya leina la tlelase, @scope e ka fokotsa poifo e e amanang le CSS mo diporojekeng tse dikgolo.
Tiriso ya Motheo
Go simolola, tsenya molao wa @scope mo CSS ya gago o bo o tsenya setlhophi sa modi se ditaele di tla tsenngwang mo go sone:
@sekopo (
Ka jalo, ka sekai, fa re ne re ka tsenya ditaele mo elementeng ya
@sekopo (nav) { a { /* Ditaele tsa kgokagano mo teng ga sekoupu sa nav */ }
a:active { /* Ditaele tsa kgokagano tse di dirang */ }
a:active::before { /* Kgokagano e e dirang e e nang le elemente ya maaka ya go dira setaele se se oketsegileng */ }
@bobegakgang (bophara jo bo kwa godimo: 768px) { a { /* Diphetolo tse di tsibogang */ } } }
Seno, ka bosone, ga se selo se se tlhotlheletsang. Le fa go ntse jalo, ngangisano ya bobedi e ka okediwa mo sekopong go tlhama molelwane o o kwa tlase, o o tlhalosang ka katlego dintlha tsa tshimologo le tsa bokhutlo tsa sekopo.
/* Elemente epe e e mo teng ga ul ga e kitla e nna le ditaele tse di dirisitsweng */ @sekopo (nav) go ya go (ul) { a { bogolo jwa fonto: 14px; } }
Mokgwa ono o bidiwa donut scoping, mme go na le mekgwa e le mmalwa e motho a ka e dirisang, go akaretsa le motseletsele wa ditlhophi tse di tshwanang, tse di rileng thata tse di kopantsweng thata le popego ya DOM, :not pseudo-selector, kgotsa go abela dielemente tsa maina a a rileng a setlhopha mo teng ga
