Prilikom učenja principa osnovnog CSS-a, neko se uči da piše modularne, višekratne i deskriptivne stilove kako bi se osiguralo održavanje. Ali kada se programeri uključe u aplikacije iz stvarnog svijeta, često se čini nemogućim dodati karakteristike korisničkog sučelja, a da stilovi ne procure u neželjena područja. Ovaj problem se često pretvara u samoispunjujuću petlju; stilovi koji su teoretski ograničeni na jedan element ili klasu počinju se pojavljivati tamo gdje im nije mjesto. Ovo prisiljava programera da kreira još specifičnije selektore kako bi nadjačao procurele stilove, koji onda slučajno nadjačavaju globalne stilove, i tako dalje. Čvrste konvencije o nazivima klasa, kao što je BEM, jedno su teorijsko rješenje ovog problema. BEM (Block, Element, Modifier) metodologija je sistematski način imenovanja CSS klasa kako bi se osigurala ponovna upotreba i struktura unutar CSS datoteka. Ovakve konvencije imenovanja mogu smanjiti kognitivno opterećenje korištenjem jezika domene za opisivanje elemenata i njihovog stanja, a ako se pravilno implementiraju, mogu učiniti stilove za velike aplikacije lakšim za održavanje. U stvarnom svijetu, međutim, ne ide uvijek tako. Prioriteti se mogu promijeniti, a sa promjenom, implementacija postaje nedosljedna. Male promjene u HTML strukturi mogu zahtijevati mnogo revizija imena CSS klasa. Sa vrlo interaktivnim front-end aplikacijama, imena klasa koje slijede BEM obrazac mogu postati dugačka i glomazna (npr. app-user-overview__status--is-authenticating), a nepoštivanje pravila imenovanja u potpunosti razbija strukturu sistema, čime se negiraju njegove prednosti. S obzirom na ove izazove, nije ni čudo što su se programeri okrenuli okvirima, a Tailwind je najpopularniji CSS okvir. Umjesto da pokušavate da se borite protiv onoga što izgleda kao nepobjediv rat specifičnosti između stilova, lakše je odustati od CSS Cascade i koristiti alate koji garantuju potpunu izolaciju. Programeri se oslanjaju više na uslužne programe Kako znamo da neki programeri žele izbjegavati kaskadne stilove? To je uspon "modernih" front-end alata - poput CSS-in-JS okvira - dizajniranih posebno za tu svrhu. Rad sa izolovanim stilovima koji su usko ograničeni na određene komponente može izgledati kao dašak svježeg zraka. Uklanja potrebu za imenovanjem stvari – i dalje jedan od najomraženijih i najzahtjevnijih front-end zadataka – i omogućava programerima da budu produktivni bez potpunog razumijevanja ili iskorištavanja prednosti CSS nasljeđivanja. Ali napuštanje CSS Cascade-a dolazi sa svojim problemima. Na primjer, sastavljanje stilova u JavaScript-u zahtijeva teške konfiguracije izgradnje i često dovodi do nespretnog miješanja stilova sa označavanjem komponenti ili HTML-om. Umjesto pažljivo razmotrenih konvencija imenovanja, dozvoljavamo alatima za izradu da automatski generiraju selektore i identifikatore umjesto nas (npr. .jsx-3130221066), zahtijevajući od programera da drže korak sa još jednim pseudo-jezikom sam po sebi. (Kao da kognitivno opterećenje razumijevanja onoga što svi useEffects vaše komponente rade već nije dovoljno!) Dalje apstrahiranje posla imenovanja klasa alatima znači da je osnovno otklanjanje grešaka često ograničeno na specifične verzije aplikacije kompajlirane za razvoj, umjesto da se koriste izvorne funkcije pretraživača koje podržavaju otklanjanje grešaka uživo, kao što su alati za programere. Gotovo je kao da trebamo razviti alate za otklanjanje grešaka u alatima koje koristimo da apstrahujemo ono što web već pruža – sve radi bježanja od „bola“ pisanja standardnog CSS-a. Srećom, moderne CSS karakteristike ne samo da čine pisanje standardnog CSS-a fleksibilnijim, već i daju programerima poput nas mnogo više moći da upravljaju kaskadom i da ona radi za nas. CSS Cascade Layers su sjajan primjer, ali postoji još jedna karakteristika koja dobija iznenađujuće nedostatak pažnje - iako se to mijenja sada kada je nedavno postala Baseline kompatibilna. CSS @scope At-pravilo Smatram da je pravilo CSS @scope potencijalni lijek za onu vrstu anksioznosti uzrokovane curenjem stila koju smo pokrili, a koja nas ne prisiljava da ugrozimo prednosti izvornog weba za apstrakcije i dodatne alate za izradu. „Pravilo @scope CSS vam omogućava da odaberete elemente u određenim DOM podstablima, precizno ciljajući elemente bez pisanja pretjerano specifičnih selektora koje je teško nadjačati i bez previše čvrstog povezivanja vaših selektora sa DOM strukturom.”— MDN
Drugim riječima, možemo raditi s izolovanim stilovima u specifičnim slučajevima bez žrtvovanja nasljeđivanja, kaskade ili čak osnovnog razdvajanja brigakoji je dugo bio vodeći princip front-end razvoja. Osim toga, ima odličnu pokrivenost pretraživača. U stvari, Firefox 146 je dodao podršku za @scope u decembru, čineći ga po prvi put kompatibilnim sa osnovnom linijom. Evo jednostavnog poređenja između dugmeta koji koristi BEM obrazac i pravila @scope:
Pravilo @scope omogućava preciznost uz manje složenosti. Programer više ne treba da kreira granice koristeći imena klasa, što im zauzvrat omogućava da pišu selektore zasnovane na izvornim HTML elementima, čime se eliminiše potreba za preskriptivnim CSS obrascima imena klasa. Jednostavnim uklanjanjem potrebe za upravljanjem imenima klasa, @scope može ublažiti strah povezan sa CSS-om u velikim projektima.
Osnovna upotreba
Da biste započeli, dodajte pravilo @scope svom CSS-u i umetnite korijenski selektor kojem će stilovi biti obuhvaćeni:
@scope (
Tako, na primjer, ako bismo stilove obuhvatili
@scope (nav) { a { /* Stilovi veza unutar navigacijskog opsega */ }
a:active { /* Aktivni stilovi linkova */ }
a:active::before { /* Aktivna veza sa pseudo-elementom za dodatni stil */ }
@media (maks. širina: 768px) { a { /* Responzivna podešavanja */ } } }
Ovo, samo po sebi, nije revolucionarna karakteristika. Međutim, drugi argument se može dodati opsegu kako bi se stvorila donja granica, efektivno definirajući početnu i krajnju točku opsega.
/* Bilo koji element unutar ul neće imati primijenjene stilove */ @scope (nav) do (ul) { a { veličina fonta: 14px; } }
Ova praksa se zove donut scoping, i postoji nekoliko pristupa koji se mogu koristiti, uključujući niz sličnih, vrlo specifičnih selektora koji su čvrsto povezani sa DOM strukturom, :not pseudo-selektor, ili dodjeljivanje specifičnih imena klasa elementima unutar
Zaključak Uslužni CSS okviri, kao što je Tailwind, dobro rade za izradu prototipa i manje projekte. Međutim, njihove prednosti brzo se smanjuju kada se koriste u većim projektima koji uključuju više od nekoliko programera. Front-end razvoj je postao sve prekompliciraniji u posljednjih nekoliko godina, a CSS nije izuzetak. Iako pravilo @scope nije lijek za sve, ono može smanjiti potrebu za složenim alatima. Kada se koristi umjesto ili uz strateško imenovanje klasa, @scope može učiniti lakšim i zabavnijim pisanje CSS-a za održavanje. Dalje čitanje
CSS @scope (MDN) “CSS @scope”, Huan Diego Rodríguez (CSS-trikovi) Napomene o izdanju Firefoxa 146 (Firefox) Podrška za pretraživač (CanIUse) Popularni CSS okviri (Stanje CSS-a 2024) „C“ u CSS-u: Cascade, Thomas Yip (CSS-Tricks) BEM Uvod (Nabavite BEM)
