Kada se uče principi osnovnog CSS-a, uči se pisati modularne, višekratno upotrebljive i opisne stilove kako bi se osigurala mogućnost održavanja. Ali kada se programeri uključe u aplikacije iz stvarnog svijeta, često se čini nemogućim dodati značajke korisničkog sučelja bez da stilovi procure u nenamjerna područja. Ovo se pitanje često pretvara u samoispunjavajuću petlju; stilovi koji su teoretski ograničeni na jedan element ili klasu počinju se pojavljivati tamo gdje im nije mjesto. Ovo tjera razvojnog programera da stvori još specifičnije selektore za nadjačavanje procurjelih stilova, koji zatim slučajno nadjačavaju globalne stilove, i tako dalje. Krute konvencije naziva klasa, kao što je BEM, jedno su teoretsko rješenje ovog problema. Metodologija BEM (Block, Element, Modifier) sustavan je 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 olakšati održavanje stilova za velike aplikacije. Međutim, u stvarnom svijetu to ne funkcionira uvijek tako. Prioriteti se mogu promijeniti, a s promjenom provedba postaje nedosljedna. Male promjene u HTML strukturi mogu zahtijevati mnoge revizije naziva CSS klasa. S visoko interaktivnim prednjim aplikacijama, nazivi klasa koji slijede BEM obrazac mogu postati dugi i nezgrapni (npr. app-user-overview__status--is-authenticating), a nepotpuno pridržavanje pravila imenovanja razbija strukturu sustava, čime se poništavaju njegove prednosti. S obzirom na te izazove, nije ni čudo da su se programeri okrenuli okvirima, a Tailwind je najpopularniji CSS okvir. Umjesto da se pokušavate boriti protiv onoga što se čini kao nepobjedivi rat specifičnosti između stilova, lakše je odustati od CSS Cascade i koristiti alate koji jamče potpunu izolaciju. Programeri se više oslanjaju na pomoćne programe Kako znamo da neki programeri žele izbjegavati kaskadne stilove? To je uspon "modernih" front-end alata - poput okvira CSS-in-JS - dizajniranih posebno za tu svrhu. Rad s izoliranim stilovima koji su usko povezani s određenim komponentama može izgledati kao dašak svježeg zraka. Uklanja potrebu za imenovanjem stvari — još uvijek jedan od najomraženijih i najdugotrajnijih front-end zadataka — i omogućuje programerima da budu produktivni bez potpunog razumijevanja ili iskorištavanja prednosti CSS nasljeđivanja. Ali odustajanje od CSS Cascade dolazi sa svojim problemima. Na primjer, sastavljanje stilova u JavaScriptu zahtijeva teške konfiguracije izgradnje i često dovodi do nespretnog miješanja stilova s oznakama komponente ili HTML-om. Umjesto pažljivo razmatranih konvencija imenovanja, dopuštamo alate za izradu koji za nas automatski generiraju selektore i identifikatore (npr. .jsx-3130221066), zahtijevajući od programera da prate još jedan pseudo-jezik sam po sebi. (Kao da kognitivno opterećenje razumijevanja što sve useEffects vaše komponente rade već nije dovoljno!) Daljnje apstrahiranje posla imenovanja klasa alatima znači da je osnovno otklanjanje pogrešaka često ograničeno na specifične verzije aplikacija kompilirane za razvoj, umjesto da se iskoriste izvorne značajke preglednika koje podržavaju otklanjanje pogrešaka uživo, kao što su Alati za razvojne programere. To je gotovo kao da trebamo razviti alate za otklanjanje pogrešaka alata koje koristimo za apstrahiranje onoga što web već nudi - sve u svrhu bježanja od "boli" pisanja standardnog CSS-a. Srećom, moderne značajke CSS-a ne samo da čine pisanje standardnog CSS-a fleksibilnijim, već također daju programerima poput nas puno više moći da upravljaju kaskadom i da rade za nas. CSS Cascade Layers izvrstan su primjer, ali postoji još jedna značajka koja dobiva iznenađujući nedostatak pažnje - iako se to mijenja sada kada je nedavno postala kompatibilna s osnovnom linijom. CSS @scope At-Rule Smatram da je CSS @scope at-rule potencijalni lijek za onu vrstu tjeskobe uzrokovane curenjem stila koju smo obradili, onaj koji nas ne tjera da ugrozimo izvorne web prednosti za apstrakcije i dodatne alate za izgradnju. “Pravilo @scope CSS at-rule omogućuje odabir elemenata u specifičnim podstablima DOM-a, ciljajući elemente precizno bez pisanja pretjerano specifičnih selektora koje je teško nadjačati i bez spajanja vaših selektora prečvrsto s DOM strukturom.”— MDN
Drugim riječima, možemo raditi s izoliranim stilovima u određenim slučajevima bez žrtvovanja nasljeđivanja, kaskadiranja ili čak osnovnog odvajanja problemato je dugotrajno načelo vodilja front-end razvoja. Osim toga, ima izvrsnu pokrivenost preglednika. Zapravo, Firefox 146 dodao je podršku za @scope u prosincu, čineći ga Baseline kompatibilnim po prvi put. Ovdje je jednostavna usporedba između gumba koji koristi BEM uzorak i pravila @scope:
Pravilo @scope omogućuje preciznost s manje složenosti. Programer više ne treba stvarati granice pomoću naziva klasa, što im zauzvrat omogućuje pisanje selektora na temelju izvornih HTML elemenata, čime se eliminira potreba za preskriptivnim CSS uzorcima naziva klasa. Jednostavnim uklanjanjem potrebe za upravljanjem imenima klasa, @scope može ublažiti strah povezan s CSS-om u velikim projektima.
Osnovna upotreba
Za početak dodajte pravilo @scope svom CSS-u i umetnite korijenski selektor kojemu će stilovi biti dodijeljeni:
@scope (
Tako, na primjer, ako želimo obuhvatiti stilove elementom
@scope (nav) { a { /* Stilovi veza unutar navigacijskog opsega */ }
a:active { /* Aktivni stilovi veza */ }
a:active::before { /* Aktivna veza s pseudoelementom za dodatni stil */ }
@media (max-width: 768px) { a { /* Responzivne prilagodbe */ } } }
Ovo, samo po sebi, nije revolucionarna značajka. Međutim, opsegu se može dodati drugi argument kako bi se stvorila donja granica, učinkovito definirajući početnu i krajnju točku opsega.
/* Svaki element unutar ul neće imati primijenjene stilove */ @scope (nav) to (ul) { a { veličina fonta: 14px; } }
Ta se praksa naziva krafnastim opsegom i postoji nekoliko pristupa koji se mogu koristiti, uključujući niz sličnih, vrlo specifičnih selektora koji su usko povezani s DOM strukturom, :not pseudo-selektor ili dodjeljivanje specifičnih naziva klasa elementima unutar
Zaključak Uslužni CSS okviri, kao što je Tailwind, dobro funkcioniraju za izradu prototipa i manje projekte. Međutim, njihove se prednosti brzo smanjuju kada se koriste u većim projektima koji uključuju više od nekoliko programera. Front-end razvoj postao je sve prekompliciran u posljednjih nekoliko godina, a CSS nije iznimka. Iako pravilo @scope nije lijek za sve, ono može smanjiti potrebu za složenim alatom. Kada se koristi umjesto ili uz strateško imenovanje klasa, @scope može olakšati i učiniti zabavnijim pisanje CSS-a koji se može održavati. Daljnje čitanje
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Bilješke o izdanju Firefoxa 146 (Firefox) Podrška za preglednik (CanIUse) Popularni CSS okviri (stanje CSS-a 2024.) “C” u CSS-u: Cascade, Thomas Yip (CSS-Tricks) Uvod u BEM (preuzmite BEM)
