Pri učení princípov základných CSS sa človek naučí písať modulárne, opakovane použiteľné a popisné štýly, aby sa zabezpečila udržiavateľnosť. Keď sa však vývojári zapoja do aplikácií v reálnom svete, často sa zdá nemožné pridať funkcie používateľského rozhrania bez toho, aby štýly prenikli do neúmyselných oblastí. Tento problém často prechádza do sebanaplňujúcej sa slučky; štýly, ktoré sú teoreticky zamerané na jeden prvok alebo triedu, sa začnú objavovať tam, kam nepatria. To núti vývojára vytvoriť ešte špecifickejšie selektory na prepísanie uniknutých štýlov, ktoré potom náhodne prepíšu globálne štýly atď. Konvencie pevných názvov tried, ako napríklad BEM, sú jedným z teoretických riešení tohto problému. Metodika BEM (Block, Element, Modifier) predstavuje systematický spôsob pomenovania tried CSS, aby sa zabezpečila opätovná použiteľnosť a štruktúra v súboroch CSS. Konvencie pomenovania, ako je táto, môžu znížiť kognitívnu záťaž využitím doménového jazyka na popis prvkov a ich stavu, a ak sú správne implementované, môžu zjednodušiť údržbu štýlov pre veľké aplikácie. V reálnom svete to však nie vždy takto funguje. Priority sa môžu meniť a so zmenou sa implementácia stáva nekonzistentnou. Malé zmeny v štruktúre HTML môžu vyžadovať veľa revízií názvu triedy CSS. S vysoko interaktívnymi front-end aplikáciami sa názvy tried podľa vzoru BEM môžu stať dlhými a nepraktickými (napr. app-user-overview__status--is-authenticating) a nedodržiavanie pravidiel pomenovania porušuje štruktúru systému, čím sa negujú jeho výhody. Vzhľadom na tieto výzvy nie je divu, že sa vývojári obrátili na frameworky, pričom Tailwind je najobľúbenejší framework CSS. Namiesto toho, aby ste sa snažili bojovať proti tomu, čo vyzerá ako nevyhrateľná vojna špecifickosti medzi štýlmi, je jednoduchšie vzdať sa kaskády CSS a použiť nástroje, ktoré zaručujú úplnú izoláciu. Vývojári sa viac spoliehajú na nástroje Ako vieme, že niektorí vývojári sa chcú vyhýbať kaskádovým štýlom? Je to vzostup „moderných“ front-end nástrojov – ako sú frameworky CSS-in-JS – navrhnuté špeciálne na tento účel. Práca s izolovanými štýlmi, ktoré sú úzko zamerané na konkrétne komponenty, sa môže zdať ako závan čerstvého vzduchu. Odstraňuje potrebu pomenovávať veci – stále jednu z najnenávidenejších a časovo najnáročnejších front-end úloh – a umožňuje vývojárom byť produktívni bez úplného pochopenia alebo využitia výhod dedenia CSS. Ale zbavenie sa kaskády CSS prichádza so svojimi vlastnými problémami. Napríklad skladanie štýlov v JavaScripte vyžaduje náročné konfigurácie zostavovania a často vedie k tomu, že štýly sa nešikovne prelínajú so značkovaním komponentov alebo HTML. Namiesto starostlivo zvážených konvencií pomenovaní umožňujeme nástrojom na vytváranie, aby za nás automaticky generovali selektory a identifikátory (napr. .jsx-3130221066), čo od vývojárov vyžaduje, aby držali krok s ďalším pseudojazykom ako takým. (Ako by kognitívna záťaž spojená s porozumením toho, čo všetko váš komponent používa Účinky, už nestačila!) Ďalšie abstrahovanie úlohy pomenovania tried na nástroje znamená, že základné ladenie je často obmedzené na konkrétne verzie aplikácií zostavené pre vývoj, a nie na využitie natívnych funkcií prehliadača, ktoré podporujú živé ladenie, ako sú napríklad nástroje pre vývojárov. Je to skoro, ako keby sme potrebovali vyvinúť nástroje na ladenie nástrojov, ktoré používame na abstrahovanie toho, čo web už poskytuje – všetko preto, aby sme utiekli pred „bolesťou“ písania štandardných CSS. Našťastie moderné funkcie CSS nielenže robia písanie štandardných CSS flexibilnejším, ale tiež dávajú vývojárom, ako sme my, oveľa viac možností na správu kaskády a aby nám to fungovalo. Skvelým príkladom sú kaskádové vrstvy CSS, no je tu ešte jedna funkcia, ktorej sa prekvapivo nevenuje pozornosť – hoci sa to teraz mení, keďže sa nedávno stala kompatibilnou so základnou líniou. Pravidlá CSS @scope At-Rule Pravidlo CSS @scope at-rule považujem za potenciálny liek na úzkosť spôsobenú únikom štýlu, o ktorej sme hovorili, a ktorá nás nenúti ohroziť výhody natívneho webu pre abstrakcie a ďalšie nástroje na zostavovanie. „Pravidlo CSS @scope vám umožňuje vybrať prvky v špecifických podstromoch DOM, presne zacieliť prvky bez písania príliš špecifických selektorov, ktoré je ťažké prepísať, a bez toho, aby ste vaše selektory príliš pevne spojili so štruktúrou DOM.“— MDN
Inými slovami, v špecifických prípadoch môžeme pracovať s izolovanými štýlmi bez toho, aby sme obetovali dedičnosť, kaskádovanie alebo dokonca základné oddelenie obáv.to je dlhodobý hlavný princíp vývoja front-endu. Navyše má vynikajúce pokrytie prehliadača. V skutočnosti Firefox 146 pridal podporu pre @scope v decembri, vďaka čomu bol prvýkrát kompatibilný s Baseline. Tu je jednoduché porovnanie medzi tlačidlom pomocou vzoru BEM a pravidlom @scope:
Pravidlo @scope umožňuje presnosť s menšou zložitosťou. Vývojár už nemusí vytvárať hranice pomocou názvov tried, čo im zase umožňuje písať selektory založené na natívnych prvkoch HTML, čím sa eliminuje potreba preskriptívnych vzorov názvov tried CSS. Jednoduchým odstránením potreby správy názvov tried môže @scope zmierniť strach spojený s CSS vo veľkých projektoch.
Základné použitie
Ak chcete začať, pridajte do svojho CSS pravidlo @scope a vložte koreňový selektor, na ktorý sa budú vzťahovať štýly:
@scope (
Ak by sme teda napríklad pridelili rozsah štýlov prvku
@scope (nav) { a { /* Štýly odkazov v rámci rozsahu navigácie */ }
a:active { /* Aktívne štýly odkazov */ }
a:active::before { /* Aktívny odkaz s pseudoprvkom pre extra štýl */ }
@media (max-width: 768px) { a { /* Responzívne úpravy */ } } }
Toto samo o sebe nie je prevratná funkcia. Do rozsahu však možno pridať druhý argument, aby sa vytvorila spodná hranica, čím sa efektívne definujú počiatočné a koncové body rozsahu.
/* Akýkoľvek prvok vo vnútri ul nebude mať aplikované štýly */ @scope (nav) to (ul) { a { veľkosť písma: 14px; } }
Tento postup sa nazýva donut scoping a je možné použiť niekoľko prístupov, vrátane série podobných, vysoko špecifických selektorov pevne spojených so štruktúrou DOM, pseudoselektora :not alebo priradenia špecifických názvov tried k prvkom v rámci
Záver Rámce CSS založené na prvom mieste, ako napríklad Tailwind, fungujú dobre na prototypovanie a menšie projekty. Ich výhody sa však rýchlo zmenšujú pri použití vo väčších projektoch, na ktorých sa podieľa viac ako pár vývojárov. Vývoj front-endov sa v posledných rokoch stal čoraz komplikovanejším a CSS nie je výnimkou. Aj keď pravidlo @scope nie je liek na všetko, môže znížiť potrebu zložitých nástrojov. Pri použití namiesto alebo popri strategickom pomenovaní tried môže @scope uľahčiť a zabaviť písanie udržiavateľných CSS. Ďalšie čítanie
CSS @scope (MDN) „CSS @scope“, Juan Diego Rodríguez (CSS-Tricks) Poznámky k vydaniu Firefoxu 146 (Firefox) Podpora prehliadača (CanIUse) Populárne rámce CSS (stav CSS 2024) „C“ v CSS: Cascade, Thomas Yip (CSS-Tricks) Úvod do BEM (Získať BEM)
