Ni mɔgɔ bɛ CSS jɔnjɔnw sariyakolow dege, a bɛ kalan ka sɛbɛnni kɛcogo modulariw, minnu bɛ se ka baara kɛ kokura, ani minnu bɛ se ka ɲɛfɔ walasa ka se ka mara. Nka ni baarakɛlaw y’u sen don diɲɛ kɔnɔ baarakɛminɛnw na, a ka c’a la, a bɛ kɛ i n’a fɔ a tɛ se ka kɛ ka UI fɛnw fara a kan k’a sɔrɔ cogoyaw ma wuli ka don yɔrɔw la minnu ma laɲini. Nin ko in ka teli ka kɛ nɛnɛ ye ka kɛ yɛrɛdafalen ye; cogoya minnu bɛ teori la, minnu bɛ tali kɛ fɛn kelen walima kalasi kelen na, olu bɛ daminɛ k’a jira u tɛ yɔrɔ min na. O bɛ dabɔbaa Wajibiya ka sugandili kɛrɛnkɛrɛnnenw Dabɔ hali ka tɛmɛn fɔlɔ kan walasa ka cogoyaw Bɔ minnu bɔra kɛnɛ kan, olu minnu bɛ sɔrɔ ka diɲɛ cogoyaw Dabɔ bala la, ani o ɲɔgɔnnaw. Kalanso tɔgɔla sariyakolo gɛlɛnw, i n’a fɔ BEM, olu ye hakilinata-fɛɛrɛ dɔ ye o ko in ɲɛnabɔcogo dɔ la. BEM (Block, Element, Modifier) fɛɛrɛ ye CSS kalasi tɔgɔdacogo ye min bɛ kɛ cogo labɛnnen na walasa ka baara kɛ kokura ani ka sigi senkan CSS filew kɔnɔ. Tɔgɔdacogo bɛnkanw i n’a fɔ nin, o bɛ se ka dɔ bɔ dɔnniya doni na ni domani kan tali ye walasa ka fɛnw n’u cogoya ɲɛfɔ, wa n’u waleyara ka ɲɛ, o bɛ se ka kɛ sababu ye ka baarakɛcogo belebelew cogoyaw ladonni nɔgɔya. Nka, diɲɛ yɛrɛ kɔnɔ, a tɛ kɛ ten tuma bɛɛ. Fɛn minnu ka kan ka bila jɔyɔrɔ fɔlɔ la, olu bɛ se ka Changé, wa ni fɛn caman Changé, waleyali bɛ kɛ fɛn ye min tɛ bɛn ɲɔgɔn ma. Yɛlɛma misɛnnin minnu bɛ kɛ HTML sigicogo la, olu bɛ se ka kɛ sababu ye ka CSS kalasi tɔgɔ lajɛ caman kɛ. Ni ɲɛfɛla baarakɛminɛnw bɛ ɲɔgɔn sɔrɔ kosɛbɛ, kalanso tɔgɔ minnu bɛ tugu BEM misali kɔ, olu bɛ se ka janya ani ka kɛ fɛn ye min tɛ se ka minɛ (misali la, app-user-overview__status--is-authenticating), wa n’i ma tugu tɔgɔko sariyaw kɔ kosɛbɛ, o bɛ sistɛmu sigicogo tiɲɛ, o la, a nafaw bɛ ban. O gɛlɛyaw kosɔn, a tɛ kabako ye ko baarakɛlaw y’u ɲɛsin karamɔgɔya ma, Tailwind de ye CSS karamɔgɔya ye min ka di kosɛbɛ. Sani i k’a ɲini ka min kɛlɛ min bɛ i n’a fɔ kɛrɛnkɛrɛnnenya kɛlɛ min tɛ se ka se sɔrɔ cogoyaw ni ɲɔgɔn cɛ, a ka nɔgɔn ka CSS Cascade dabila ani ka baara kɛ ni baarakɛminɛnw ye minnu bɛ danfara dafalen garanti. Developpeurs bɛ u jigi da Utilities kan kosɛbɛ An b’a Dɔn cogo di ko yiriwalikɛla dɔw b’a fɛ k’u yɛrɛ tanga cascade styles ma? O ye ɲɛfɛla baarakɛminɛnw “bi” wuliliko ye — i n’a fɔ CSS-in-JS karamɔgɔya — minnu dabɔra kɛrɛnkɛrɛnnenya la o kun na. Baara kɛli ni cogoya danfaralenw ye minnu bɛ tali kɛ yɔrɔ kɛrɛnkɛrɛnnenw na kosɛbɛ, o bɛ se ka kɛ i n’a fɔ fiɲɛ duman fiyɛ. A bɛ fɛnw tɔgɔ fɔli mago bɔ yen — hali bi o ye ɲɛfɛla baara minnu koniyalen don kosɛbɛ ani minnu bɛ waati ta kosɛbɛ — wa a b’a to baarakɛlaw ka se ka baara kɛ k’a sɔrɔ u ma CSS ciyɛn nafa faamuya kosɛbɛ walima k’a ta. Nka ditching CSS Cascade bɛ Nà n'a yɛrɛ ka gɛlɛyaw ye. Misali la, cogoyaw sɛbɛnni JavaScript kɔnɔ, o bɛ jɔli labɛncogo gɛlɛnw de wajibiya wa a ka c’a la, o bɛ na ni cogoyaw ye minnu bɛ ɲɔgɔn ɲagami cogo gɛlɛn na ni component markup walima HTML ye. Sani an ka tɔgɔko bɛnkanw jateminɛ kosɛbɛ, an b’a to jɔli baarakɛminɛnw ka se ka sugandiliw ni dantigɛliw kɛ u yɛrɛ ye an ye (misali la, .jsx-3130221066), o b’a ɲini baarakɛlaw fɛ u ka to ka kan nkalonma wɛrɛ sɔrɔ u yɛrɛ kɔnɔ. (I n’a fɔ i ka component’s useEffects bɛɛ bɛ min kɛ, o faamuyali dɔnniya doni ma se kaban!) Ka t’a fɛ ka kalasi tɔgɔladonni baara kɛ baarakɛminɛnw ye, o kɔrɔ ye ko basigilenw sɛgɛsɛgɛli bɛ dantigɛ tuma caman na baarakɛminɛn kɛrɛnkɛrɛnnenw sɛrɛkiliw la minnu labɛnna yiriwali kama, sanni ka nafa sɔrɔ navigatɔrɔn nafamafɛnw na minnu bɛ tiɲɛni ɲɛnamaw dɛmɛ, i n’a fɔ Developer Tools. A bɛ ɲini ka kɛ i n’a fɔ an ka kan ka baarakɛminɛnw labɛn walasa k’an bɛ baara kɛ ni baarakɛminɛn minnu ye walasa ka ɛntɛrinɛti bɛ fɛn minnu di kaban, olu bɔ kɛnɛ kan — o bɛɛ kɛra sababu ye ka boli CSS sariyalen sɛbɛnni “dimi” ɲɛ. A nisondiyalen don, bi CSS baarakɛcogo tɛ CSS sariyalen sɛbɛnni kɛ dɔrɔn ka ɲɛ nka u bɛ fanga caman di an bɔɲɔgɔnko baarakɛlaw ma walasa ka kaskada ɲɛnabɔ ani k’a kɛ baara ye an ye. CSS Cascade Layers ye misali ɲuman ye, nka fɛn wɛrɛ bɛ yen min bɛ jateminɛbaliya kabakoma sɔrɔ — hali n’o bɛ ka Changé sisan k’a sɔrɔ a kɛra Baseline compatible ye kɔsa in na. A ka CSS @scope At-Rule N b’a jate ko CSS @scope at-rule ye fura ye min bɛ se ka kɛ fura ye min bɛ se ka kɛ an ye jɔrɔnanko suguya min ɲɛfɔ, n’o ye style-leak-induced anxiety ye, min t’an wajibiya ka native web nafaw tiɲɛ abstractions ni extra build tooling kama. “@scope CSS at-rule b’a to i bɛ se ka fɛnw sugandi DOM jiri fitinin kɛrɛnkɛrɛnnenw kɔnɔ, ka fɛnw laɲini tigitigi k’a sɔrɔ i ma sugandili kɛrɛnkɛrɛnnenw sɛbɛn kojugu minnu ka gɛlɛn ka tɛmɛ u kan, ani k’a sɔrɔ i ma i ka sugandiliw siri kosɛbɛ DOM sigicogo la.”— MDN
O kɔrɔ ye ko an bɛ se ka baara kɛ ni cogoya danfaralenw ye ko kɛrɛnkɛrɛnnenw na k’a sɔrɔ an ma ciyɛn, kaskada, walima hali haminankow faranfasi jɔnjɔn sarakao kɛra ɲɛfɛla yiriwali ɲɛminɛcogo ye min bɛ senna kabini tuma jan. Ka fara o kan, a bɛ ni navigatɔrɔn ka coverage ɲumanba ye. Tiɲɛ na, Firefox 146 ye dɛmɛ Fàra @scope kan Desanburukalo la, k’a Kɛ Baseline bɛ Se ka Bɛn a siɲɛ fɔlɔ la. Nin ye danfara nɔgɔman ye butɔni min bɛ baara kɛ ni BEM misali ye ni @scope sariya ye: ye
ye
@scope sariya bɛ sira Di tiɲɛni ma ni gɛlɛya dɔgɔman ye. Dabɔbaa mago t’a la tugun ka dancɛw Dabɔ ni kalasi tɔgɔw ye, o min b’a To u bɛ Se ka sugandiliw sɛbɛn ka Da HTML fɛnw kan minnu bɛ Bɔ u yɛrɛ la, o la, u mago tɛ CSS kalasi tɔgɔ misaliw la minnu bɛ yamaruya di. Ni a ye mago bɔ kalanso tɔgɔko ɲɛnabɔli la dɔrɔn, @scope bɛ se ka siran min bɛ CSS la porozɛbaw kɔnɔ, o nɔgɔya.
Baarakɛcogo jɔnjɔn
Walasa k’a daminɛ, @scope sariya fara i ka CSS kan ani ka root selector dɔ don min kɔnɔ styles bɛna scoped:
@scope (
O la, misali la, n’an tun bɛna cogoyaw sɛgɛsɛgɛ ka taa
@skɔpi (nav) { a { /* Jɛɲɔgɔnya cogoyaw nav scope kɔnɔ */ } .
a:active { /* Jɛɲɔgɔnya kɛcogo minnu bɛ baara la */ } .
a:active::before { /* Jɛɲɔgɔnya baarakɛlen ni pseudo-element ye walasa ka stili wɛrɛw kɛ */ } .
@media (a bonyaba: 768px) { a { /* Jaabi ladilanni */ } . } . } .
Nin, a yɛrɛ la, o tɛ dugukolo-ko ye. Nka, sɔsɔli filanan bɛ Se ka Fàra dakun kan walasa ka dancɛ dɔgɔman dɔ Dabɔ, ka dakun daminɛ ni labanyɔrɔw ɲɛfɔ ka ɲɛ.
/* Eleman o element min bɛ ul kɔnɔ, o tɛna kɛ ni styles appliquées ye */ @scope (nav) ka taa (ul) { a { . sɛbɛnnibolo-hakɛ: 14px; } . } .
O wale in bɛ Weele ko donut scoping, wa fɛɛrɛ damadɔ bɛ yen mɔgɔ bɛ Se ka baara Kɛ ni minnu ye, i n’a fɔ sugandilikɛlan minnu bɛ tali Kɛ ɲɔgɔn na, minnu kɛrɛnkɛrɛnnen don kosɛbɛ, minnu sirilen dòn kosɛbɛ DOM jɔcogo la, :not pseudo-selector, walima ka kalasi tɔgɔ kɛrɛnkɛrɛnnenw Di fɛnw ma
Kuncɛli Utility-first CSS frameworks, i n’a fɔ Tailwind, olu bɛ baara kɛ ka ɲɛ prototyping ni porozɛ misɛnninw na. Nka, u nafa bɛ dɔgɔya joona n’u bɛ baara kɛ ni u ye porozɛbaw la minnu ka ca ni baarakɛla fila-fila ye. Front-end yiriwali kɛra gɛlɛya ye ka taa a fɛ san damadɔ tɛmɛnenw na, wa CSS fana tɛ bɔ o la. Hali ni @scope sariya tɛ fura ye, a bɛ se ka dɔ bɔ baarakɛminɛn gɛlɛnw mago la. Ni baara kɛra ni a ye kalasi tɔgɔladonni fɛɛrɛbɔlen nɔ na, walima a kɛrɛfɛ, @scope bɛ se ka CSS sɛbɛn min bɛ se ka mara, o ka nɔgɔn ani ka diya. Kalan wɛrɛw
CSS @scope (MDN) ye . “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) ye baara kɛ ni a ye. Firefox 146 Laseli sɛbɛnw (Firefox) . Navigatɛri dɛmɛni (CanIUse) . CSS karamɔgɔya minnu bɛ fɔ kosɛbɛ (CSS 2024 jamana) . ““C” min bɛ CSS kɔnɔ: Kaskad”, Thomas Yip (CSS-Tricks) BEM Dajirali (Get BEM) .
