Sɛ obi resua nnyinasosɛm ahorow a ɛwɔ CSS titiriw no mu a, wɔkyerɛkyerɛ obi sɛ ɔnkyerɛw modular, reusable, ne descriptive styles na ama wɔahwɛ ahu sɛ wobetumi ahwɛ so. Nanso sɛ developers de wɔn ho hyɛ wiase ankasa applications mu a, ɛtaa te nka sɛ ɛrentumi nyɛ yiye sɛ wɔde UI features bɛka ho a styles nkɔ mmeae a wɔanhyɛ da. Saa asɛm yi taa yɛ sukyerɛmma a ɛyɛ nea ɛma ne ho tɔ; styles a theoretically scoped to one element anaa class fi ase da adi wɔ baabi a ɛnyɛ ne de. Wei hyɛ developer no ma ɔyɛ selectors pɔtee mpo de bu leaked styles no so, a afei wɔ akwanhyia mu bu wiase nyinaa styles so, ne nea ɛkeka ho. Adesuakuw din ho nhyiam ahorow a ɛyɛ katee te sɛ BEM yɛ nsusuwii mu ano aduru biako a wɔde bedi asɛm yi ho dwuma. BEM (Block, Element, Modifier) kwan no yɛ nhyehyɛe kwan a wɔfa so to CSS adesua ahorow din de hwɛ hu sɛ wobetumi asan de adi dwuma na wɔayɛ nhyehyɛe wɔ CSS fael ahorow mu. Din a wɔbɔ te sɛ yei betumi atew adwene mu adesoa so denam domain kasa a wɔde bedi dwuma de akyerɛkyerɛ nneɛma ne wɔn tebea mu, na sɛ wɔde di dwuma yiye a, ebetumi ama akwan horow a wɔfa so yɛ adwuma akɛse no ayɛ mmerɛw sɛ wɔbɛhwɛ so. Nanso, wɔ wiase ankasa mu no, ɛnyɛ bere nyinaa na ɛkɔ so saa. Nneɛma a wɔde di kan no betumi asesa, na sɛ nsakrae ba a, nea wɔde di dwuma no bɛyɛ nea enhyia. Nsakraeɛ nketenkete a ɛba HTML nhyehyɛɛ mu no bɛtumi ahwehwɛ sɛ wɔyɛ CSS adesuakuo din mu nsakraeɛ pii. Ɛnam anim-awieɛ dwumadie a ɛyɛ nkitahodiɛ kɛseɛ so no, adesua din a ɛdi BEM nhyehyɛeɛ no akyi no bɛtumi abɛyɛ tenten na ɛnyɛ den (e.g., app-user-overview__status--is-authenticating), na sɛ wɔanni edin mmara no so koraa a, ɛbu nhyehyɛeɛ no nhyehyɛeɛ so, na ɛnam so pow ne mfasoɔ. Sɛ yɛhwɛ saa nsɛnnennen yi a, ɛnyɛ nwonwa sɛ developers adan akɔ frameworks so, Tailwind ne CSS framework a agye din sen biara. Sɛ anka wobɛbɔ mmɔden sɛ wobɛko atia nea ɛte sɛ ɔko pɔtee a wontumi nni nkonim wɔ ntadehyɛ ahorow ntam no, ɛnyɛ den sɛ wobɛgyae CSS Cascade no na wode nnwinnade a ɛma wo ho tow koraa bedi dwuma. Wɔn a Wɔyɛ no De Wɔn Ho To Utilities So Pii Yɛbɛyɛ dɛn ahu sɛ developers binom ani gye ho sɛ wɔbɛkwati cascaded styles? Ɛyɛ “nnɛyi” anim-awie nnwinnade a ɛrekɔ soro — te sɛ CSS-in-JS nhyehyɛe — a wɔayɛ ama saa atirimpɔw no titiriw. Sɛ wode akwan horow a atew ne ho a ɛne nneɛma pɔtee bi hyia denneennen bɛyɛ adwuma a, ebetumi ayɛ te sɛ mframa pa a wɔhome. Ɛyi hia a ɛhia sɛ wɔbɔ nneɛma din — ɛda so ara yɛ anim-awieɛ nnwuma a wɔtan na ɛgye berɛ paa no mu baako — na ɛma developers tumi yɛ adwuma a wɔnte aseɛ yie anaasɛ wɔmfa mfasoɔ a ɛwɔ CSS agyapadeɛ so nni dwuma. Nanso ditching CSS Cascade no de n’ankasa haw ahorow ba. Sɛ nhwɛso no, sɛnea wɔhyehyɛ akwan horow wɔ JavaScript mu no hwehwɛ sɛ wɔyɛ nhyehyɛe a emu yɛ duru a wɔde si dan na ɛtaa de akwan horow a ɛyɛ fɛre frafrae ne component markup anaa HTML ba. Sɛ anka yɛbɛsusu din a wɔde toto ho nhyiamu ho yie no, yɛma kwan ma adansi nnwinnadeɛ no yɛ autogenerate selectors ne identifiers ma yɛn (e.g., .jsx-3130221066), a ɛhwehwɛ sɛ developers no kɔ so ne pseudo-kasa foforɔ bi di nsɛ wɔ n’ankasa mu. (Te sɛ nea adwene mu adesoa a ɛne sɛ wobɛte nea wo component’s useEffects nyinaa yɛ ase no nnɔɔso dedaw!) Adwuma a ɛne sɛ wɔbɛto adesuakuw din akɔ adwinnade mu no a wɔbɛkɔ so atwe adwene asi so no kyerɛ sɛ wɔtaa de mfitiaseɛ debugging no to application versions pɔtee bi a wɔaboaboa ano ama nkɔsoɔ so, sene sɛ wɔde native browser features a ɛboa live debugging, te sɛ Developer Tools bedi dwuma. Ɛkame ayɛ sɛ ɛhia sɛ yɛyɛ nnwinnadeɛ a yɛde bɛsiesie nnwinnadeɛ a yɛde redi dwuma no de atwe deɛ wɛb no de ama dedaw no afiri mu — ne nyinaa ne sɛ yɛbɛguan afiri “ɛyaw” a ɛwɔ sɛ yɛkyerɛw CSS a ɛyɛ gyinapɛn no ho. Nea eye ne sɛ, nnɛyi CSS nneɛma nyɛ sɛ ɛma akyerɛw standard CSS yɛ nea ɛyɛ mmerɛw nko na mmom ɛma developers te sɛ yɛn tumi kɛse a wɔde hwɛ cascade no so na wɔma ɛyɛ adwuma ma yɛn. CSS Cascade Layers yɛ nhwɛsoɔ kɛseɛ, nanso ade foforɔ bi wɔ hɔ a ɛnya adwene a ɛnni hɔ a ɛyɛ nwonwa — ɛwom sɛ ɛno resakra seesei a nnansa yi ara abɛyɛ Baseline compatible. CSS no @scope At-Mmara no Mebu CSS @scope at-rule sɛ ɛyɛ aduru a ɛbɛtumi ama dadwen a style-leak-induced a yɛakata so no, deɛ ɛnhyɛ yɛn sɛ yɛmfa native web advantages nsɛe mma abstractions ne extra build tooling. “@scope CSS at-rule no ma wutumi paw nneɛma a ɛwɔ DOM nnua nketewa pɔtee bi mu, de w’ani si nneɛma so pɛpɛɛpɛ a wonkyerɛw nneɛma a wɔpaw no pɔtee dodo a ɛyɛ den sɛ wobɛpopa, na womfa wo paw ahorow no nka DOM nhyehyɛe no ho denneennen dodo.”— MDN
Ɔkwan foforo so no, yebetumi de akwan horow a atew ne ho ayɛ adwuma wɔ nsɛm pɔtee bi mu a yɛmfa agyapade, cascading, anaa mpo mfitiase mpaapaemu a ɛhaw adwene no mmɔ afɔreɛno ayɛ nnyinasosɛm a ɛkyerɛ kwan bere tenten wɔ anim nkɔso ho. Nea ɛka ho no, ɛwɔ browser coverage a eye kyɛn so. Nokwarem no, Firefox 146 de mmoa kaa ho maa @scope wɔ December mu, na ɛmaa ɛyɛɛ Baseline a ɛne no hyia nea edi kan. Ntotoeɛ a ɛnyɛ den a ɛda bɔtn a wɔde BEM nhwɛsoɔ di dwuma ne @scope mmara no ntam nie: na ɛkyerɛ
<ɔkwan a wɔfa so yɛ> .button .button__text { /* button nkyerɛwee ahorow */ } . .button .button__icon { /* bɔtn ahyɛnsode ahorow */ } . .button--primary { mfitiaseɛ bɔton ahodoɔ */ } . na ɛkyerɛ
na ɛkyerɛ
<ɔkwan a wɔfa so yɛ> @scope (.mfitiase-bɔn) { . span:first-child { /* button nkyerɛwee ahorow */ } . span:last-child { /* bɔtn ahyɛnsode ahorow */ } . } . na ɛkyerɛ
@scope mmara no ma kwan ma wɔyɛ pɛpɛɛpɛ a ɛnyɛ den pii. Ɛho nhia bio sɛ developer no de class din bɛbɔ ahye, a ɛno nso ma wɔn kwan ma wɔkyerɛw selectors a egyina native HTML elements so, na ɛnam so ma ɛho nhia sɛ wɔyɛ prescriptive CSS class din patterns. Ɛdenam hia a ɛho hia sɛ wɔhwɛ adesuakuw din so a wobeyi afi hɔ ara kwa so no, @scope betumi abrɛ ehu a ɛbata CSS ho wɔ nnwuma akɛse mu no ase.
Mfitiaseɛ a Wɔde Di Dwuma
Sɛ wopɛ sɛ wohyɛ aseɛ a, fa @scope mmara no ka wo CSS ho na fa root selector a wɔbɛma styles akɔ scoped no hyɛ mu:
@scope (<ɔpawfo>) { .
/* Styles a wɔayɛ no scoped akɔ
Enti, sɛ nhwɛsoɔ no, sɛ yɛde scope styles kɔ
@scope (nav) { . a { /* Link styles wɔ nav scope mu */ } .
a:active { /* Nkitahodi akwan a ɛyɛ adwuma */ } .
a:active::before { /* Nkitahodi a ɛyɛ adwuma a ɛwɔ pseudo-element ma styling foforo */ }
@media (ntrɛwmu a ɛsen biara: 768px) { a { /* Nsakraeɛ a ɛfa mmuaeɛ ho */ } . } . } .
Eyi ankasa nyɛ ade a ɛyɛ nwonwa. Nanso, wobetumi de akyinnyegye a ɛto so abien aka scope no ho de ayɛ ɔhye a ɛba fam, na akyerɛkyerɛ scope no mfiase ne awiei nsɛntitiriw mu yiye.
/* Element biara a ɛwɔ ul mu no rennya styles a wɔde adi dwuma */ @scope (nav) kosi (ul) { . a { . nkyerɛwde-kɛse: 14px; } . } .
Wɔfrɛ saa adeyɛ yi donut scoping, na akwan pii wɔ hɔ a obi betumi de adi dwuma, a nea ɛka ho ne selectors a ɛte saa ara, a ɛyɛ pɔtee kɛse a wɔde abɔ DOM nhyehyɛe no ho denneennen, :ɛnyɛ pseudo-selector, anaasɛ wɔde adesuakuw din pɔtee bi ma elements a ɛwɔ
Awiei Utility-first CSS frameworks, te sɛ Tailwind, yɛ adwuma yie ma prototyping ne nnwuma nketewa. Nanso, wɔn mfaso so tew ntɛmntɛm bere a wɔde di dwuma wɔ nnwuma akɛse a nnipa bɛboro baanu bi a wɔyɛ adwuma wom mu no. Front-end nkɔsoɔ abɛyɛ nea ɛyɛ den dodo wɔ mfeɛ kakra a atwam no mu, na CSS nso nyɛ saa. Bere a @scope mmara no nyɛ aduru-ne nyinaa no, ebetumi atew hia a ɛho hia sɛ wɔde nnwinnade a ɛyɛ den di dwuma no so. Sɛ wɔde di dwuma si ananmu, anaasɛ ɛka strategic class naming ho a, @scope betumi ama ayɛ mmerɛw na ɛyɛ anigye sɛ wobɛkyerɛw CSS a wotumi hwɛ so. Akenkan a Ɛkɔ Akyiri
CSS @scope (MDN) . “CSS @scope”, Juan Diego Rodríguez (CSS-Afiri a Wɔde Di Dwuma) Firefox 146 Nkyekyɛmu a Wɔayi no Adi (Firefox) . Browser Mmoa (CanIUse) . CSS Nhyehyɛe a agye din (CSS Tebea 2024) . ““C” a ɛwɔ CSS mu: Cascade”, Thomas Yip (CSS-Tricks) . BEM Nnianim Nsɛm (Nya BEM) .
