Kiam oni lernas la principojn de baza CSS, oni instruas skribi modulajn, reuzeblajn kaj priskribajn stilojn por certigi konserveblecon. Sed kiam programistoj implikiĝas kun realaj aplikoj, ofte ŝajnas neeble aldoni UI-funkciojn sen stiloj liki en neintencitan areojn. Ĉi tiu afero ofte neĝbuloj en memplenuma buklo; stiloj kiuj estas teorie ampleksitaj al unu elemento aŭ klaso komencas aperi kie ili ne apartenas. Ĉi tio devigas la programiston krei eĉ pli specifajn elektilojn por superregi la likitajn stilojn, kiuj tiam hazarde superregas tutmondajn stilojn, ktp. Rigidaj klasnomaj konvencioj, kiel ekzemple BEM, estas unu teoria solvo al tiu problemo. La metodologio BEM (Bloko, Elemento, Modifilo) estas sistema maniero nomi CSS-klasojn por certigi reuzeblon kaj strukturon ene de CSS-dosieroj. Nomado de konvencioj kiel ĉi tio povas redukti kognan ŝarĝon utiligante domajnan lingvon por priskribi elementojn kaj ilian staton, kaj se efektivigite ĝuste, povas igi stilojn por grandaj aplikoj pli facile konservi. En la reala mondo, tamen, ĝi ne ĉiam funkcias tiel. Prioritatoj povas ŝanĝiĝi, kaj kun ŝanĝo, efektivigo iĝas malkonsekvenca. Malgrandaj ŝanĝoj al la HTML-strukturo povas postuli multajn CSS-klasnomajn reviziojn. Kun tre interagaj antaŭfinaj aplikoj, klasnomoj sekvantaj la BEM-padronon povas iĝi longaj kaj maloportunaj (ekz., app-user-overview__status--is-authenticating), kaj ne plene aliĝi al la nomreguloj rompas la strukturon de la sistemo, tiel neante ĝiajn avantaĝojn. Konsiderante ĉi tiujn defiojn, ne estas mirinde, ke programistoj turnis sin al kadroj, Tailwind estas la plej populara CSS-kadro. Prefere ol provi batali tion, kio ŝajnas kiel nevenkebla specifmilito inter stiloj, estas pli facile rezigni pri la CSS-Kaskado kaj uzi ilojn, kiuj garantias kompletan izolitecon. Programistoj Lean Pli pri Utilaĵoj Kiel ni scias, ke iuj programistoj volas eviti kaskadatajn stilojn? Ĝi estas la pliiĝo de "modernaj" antaŭfinaj iloj - kiel CSS-en-JS-kadroj - dizajnitaj specife por tiu celo. Labori kun izolitaj stiloj, kiuj estas strikte amplekse al specifaj komponentoj, povas ŝajni kiel spiro de freŝa aero. Ĝi forigas la bezonon nomi aferojn - ankoraŭ unu el la plej malamataj kaj tempopostulaj antaŭfinaj taskoj - kaj permesas al programistoj esti produktivaj sen plene kompreni aŭ ekspluati la avantaĝojn de CSS-heredaĵo. Sed forĵeti la CSS-Kaskadon venas kun siaj propraj problemoj. Ekzemple, komponi stilojn en JavaScript postulas pezajn konstruajn agordojn kaj ofte kondukas al stiloj mallerte intermiksiĝantaj kun komponentmarkado aŭ HTML. Anstataŭ zorge pripensitaj nomkonvencioj, ni permesas konstruajn ilojn por aŭtomate generi elektilojn kaj identigilojn por ni (ekz., .jsx-3130221066), postulante programistojn konservi ankoraŭ kun alia pseŭdo-lingvo en si mem. (Kvazaŭ la kogna ŝarĝo kompreni, kion faras ĉiuj viaj komponantoj-uzaj Efikoj, ne jam sufiĉas!) Plue abstrakti la taskon nomi klasojn al ilado signifas ke baza sencimigo ofte estas limigita al specifaj aplikaĵversioj kompilitaj por evoluo, prefere ol ekspluati denaskajn retumiltrajtojn kiuj subtenas vivan senararigon, kiel ekzemple Developer Tools. Estas preskaŭ kvazaŭ ni bezonas evoluigi ilojn por sencimigi la ilojn, kiujn ni uzas por abstrakti tion, kion la reto jam provizas - ĉio por forkuri de la "doloro" verki norman CSS. Feliĉe, modernaj CSS-funkcioj ne nur igas skribon norma CSS pli fleksebla sed ankaŭ donas al programistoj kiel ni multe pli da potenco administri la kaskadon kaj igi ĝin funkcii por ni. CSS Cascade Layers estas bonega ekzemplo, sed estas alia trajto, kiu ricevas surprizan mankon de atento - kvankam tio ŝanĝiĝas nun, kiam ĝi lastatempe fariĝis Bazlinio kongrua. La CSS @scope Ĉe-Regulo Mi konsideras, ke la CSS @scope at-regulo estas ebla kuraco kontraŭ la speco de stil-fluo-induktita angoro, kiun ni kovris, kiu ne devigas nin kompromiti denaskajn retajn avantaĝojn por abstraktaĵoj kaj ekstra konstrua ilaro. "La @scope CSS ĉe-regulo ebligas al vi elekti elementojn en specifaj DOM-subarboj, celante elementojn ĝuste sen skribi tro specifajn elektilojn, kiuj estas malfacile superregeblaj, kaj sen kunligi viajn elektilojn tro firme al la DOM-strukturo." - MDN
Alivorte, ni povas labori kun izolitaj stiloj en specifaj kazoj sen oferi heredon, kaskadon aŭ eĉ la bazan apartigon de zorgoj.tio estis longdaŭra gvidprincipo de antaŭa evoluado. Krome, ĝi havas bonegan retumilon. Fakte, Firefox 146 aldonis subtenon por @scope en decembro, igante ĝin Baseline kongrua unuafoje. Jen simpla komparo inter butono uzanta la BEM-ŝablonon kontraŭ la regulo @scope:
La regulo @scope permesas precizecon kun malpli da komplekseco. La programisto ne plu bezonas krei limojn uzante klasnomojn, kiuj, siavice, permesas al ili skribi elektilojn bazitajn sur indiĝenaj HTML-elementoj, tiel forigante la bezonon de preskribaj CSS-klasnomaj ŝablonoj. Simple forigante la bezonon de administrado de klasnomoj, @scope povas mildigi la timon asociitan kun CSS en grandaj projektoj.
Baza Uzado
Por komenci, aldonu la regulon @scope al via CSS kaj enigu radikan elektilon al kiu stiloj estos ampleksitaj:
@skopo (
Do, ekzemple, se ni ampleksis stilojn al elemento
@skopo (nav) { a { /* Ligi stilojn ene de nav-amplekso */ }
a:active { /* Aktivaj ligaj stiloj */ }
a:active::before { /* Aktiva ligilo kun pseŭdo-elemento por kroma stilado */ }
@media (maksimuma larĝa: 768 px) { a { /* Respondaj alĝustigoj */ } } }
Ĉi tio, per si mem, ne estas pionira trajto. Tamen, dua argumento povas esti aldonita al la amplekso por krei pli malaltan limon, efike difinante la komencajn kaj finpunktojn de la amplekso.
/* Ajna elemento ene de ul ne havos la stilojn aplikatajn */ @skopo (nav) al (ul) { a { tiparo-grandeco: 14px; } }
Ĉi tiu praktiko estas nomita donut-skoping, kaj ekzistas pluraj aliroj kiujn oni povus uzi, inkluzive de serio de similaj, tre specifaj elektiloj kunligitaj firme al la DOM-strukturo, :not pseŭdo-elektilo, aŭ asignante specifajn klasnomojn al elementoj ene de la
Konkludo Utilaj unuaj CSS-kadroj, kiel Tailwind, funkcias bone por prototipado kaj pli malgrandaj projektoj. Iliaj avantaĝoj rapide malpliiĝas, tamen, kiam ili estas uzataj en pli grandaj projektoj, kiuj implikas pli ol kelkajn programistojn. Antaŭfina evoluo fariĝis ĉiam pli tro komplika en la lastaj jaroj, kaj CSS ne estas escepto. Dum la regulo @scope ne estas kuracilo, ĝi povas redukti la bezonon de kompleksa ilaro. Se uzata anstataŭ, aŭ kune kun strategia klasnomado, @scope povas plifaciligi kaj pli amuza skribi konserveblan CSS. Plia Legado
CSS @skopo (MDN) "CSS @skopo", Juan Diego Rodríguez (CSS-trukoj) Eldonaj Notoj de Firefox 146 (Firefox) Subteno por retumilo (CanIUse) Popularaj CSS-Kadroj (Stato de CSS 2024) "La "C" en CSS: Kaskado", Thomas Yip (CSS-trukoj) Enkonduko de BEM (Akiri BEM)
