Když se naučíte principy základních CSS, naučíte se psát modulární, opakovaně použitelné a popisné styly, aby byla zajištěna udržovatelnost. Když se však vývojáři zapojí do aplikací v reálném světě, často se zdá nemožné přidat funkce uživatelského rozhraní, aniž by styly pronikly do nezamýšlených oblastí. Tento problém často přechází do sebenaplňující se smyčky; styly, které jsou teoreticky zaměřeny na jeden prvek nebo třídu, se začnou objevovat tam, kam nepatří. To nutí vývojáře vytvořit ještě specifičtější selektory pro přepsání uniklých stylů, které pak omylem přepíší globální styly a tak dále. Jedním z teoretických řešení tohoto problému jsou pevné konvence názvů tříd, jako je BEM. Metodika BEM (Block, Element, Modifier) je systematický způsob pojmenování tříd CSS, aby byla zajištěna opětovná použitelnost a struktura v souborech CSS. Konvence pojmenování, jako je tato, mohou snížit kognitivní zátěž využitím doménového jazyka k popisu prvků a jejich stavu, a pokud jsou správně implementovány, mohou usnadnit údržbu stylů pro velké aplikace. V reálném světě to tak ale vždy nefunguje. Priority se mohou měnit a se změnou se implementace stává nekonzistentní. Malé změny ve struktuře HTML mohou vyžadovat mnoho revizí názvu třídy CSS. U vysoce interaktivních front-end aplikací se názvy tříd podle vzoru BEM mohou stát dlouhými a nepraktickými (např. app-user-overview__status--is-authenticating) a nedodržení pravidel pro pojmenování narušuje strukturu systému, a tím neguje jeho výhody. Vzhledem k těmto výzvám není divu, že se vývojáři obrátili na frameworky, přičemž Tailwind je nejoblíbenější framework CSS. Spíše než se snažit bojovat s tím, co vypadá jako nevyhraitelná válka specifičnosti mezi styly, je snazší vzdát se kaskády CSS a použít nástroje, které zaručují úplnou izolaci. Vývojáři se více spoléhají na nástroje Jak víme, že někteří vývojáři se chtějí vyhýbat kaskádovým stylům? Je to vzestup „moderních“ front-end nástrojů – jako jsou frameworky CSS-in-JS – navržené speciálně pro tento účel. Práce s izolovanými styly, které jsou úzce zaměřeny na konkrétní komponenty, se může zdát jako závan čerstvého vzduchu. Odstraňuje potřebu pojmenovávat věci – stále jeden z nejvíce nenáviděných a časově náročných front-endových úkolů – a umožňuje vývojářům být produktivní, aniž by plně chápali nebo využívali výhod dědičnosti CSS. Ale vyřazení kaskády CSS má své vlastní problémy. Například skládání stylů v JavaScriptu vyžaduje náročné konfigurace sestavení a často vede ke stylům, které se nešikovně prolínají s označením komponent nebo HTML. Namísto pečlivě zvážených konvencí pojmenování umožňujeme nástrojům pro vytváření, aby za nás automaticky generovaly selektory a identifikátory (např. .jsx-3130221066), což od vývojářů vyžaduje, aby drželi krok s dalším pseudojazykem jako takovým. (Jako by kognitivní zátěž spojená s pochopením toho, co všechno vaše komponenta používá, efekty, již nestačila!) Další abstrahování úkolu pojmenovávat třídy na nástroje znamená, že základní ladění je často omezeno na konkrétní verze aplikací zkompilované pro vývoj, spíše než na využití nativních funkcí prohlížeče, které podporují živé ladění, jako jsou nástroje pro vývojáře. Je to skoro, jako bychom potřebovali vyvinout nástroje k ladění nástrojů, které používáme k abstrahování toho, co web již poskytuje – to vše proto, abychom utekli od „bolesti“ psaní standardních CSS. Naštěstí moderní funkce CSS nejen činí psaní standardních CSS flexibilnějším, ale také dávají vývojářům, jako jsme my, mnohem více možností spravovat kaskádu a zajistit, aby fungovala za nás. Skvělým příkladem jsou kaskádové vrstvy CSS, ale je tu ještě jedna funkce, které se překvapivě nedostává pozornosti – i když se to nyní mění, když se nedávno stala kompatibilní se základní linií. CSS @scope At-Rule Pravidlo CSS @scope at-rule považuji za potenciální lék na úzkost způsobenou únikem stylu, kterou jsme probrali, takovou, která nás nenutí kompromitovat výhody nativního webu pro abstrakce a další nástroje pro vytváření. „Pravidlo CSS @scope vám umožňuje vybrat prvky v konkrétních podstromech DOM, přesně zacílit prvky bez psaní příliš specifických selektorů, které je těžké přepsat, a bez příliš těsného propojení vašich selektorů se strukturou DOM.“— MDN
Jinými slovy, můžeme pracovat s izolovanými styly v konkrétních případech, aniž bychom obětovali dědičnost, kaskádování nebo dokonce základní oddělení zájmů.to je dlouhodobý hlavní princip vývoje front-endu. Navíc má vynikající pokrytí prohlížečem. Ve skutečnosti Firefox 146 přidal podporu pro @scope v prosinci, díky čemuž je poprvé kompatibilní s Baseline. Zde je jednoduché srovnání mezi tlačítkem používajícím vzor BEM a pravidlem @scope:
Pravidlo @scope umožňuje přesnost s menší složitostí. Vývojář již nemusí vytvářet hranice pomocí názvů tříd, což jim zase umožňuje psát selektory založené na nativních prvcích HTML, čímž eliminuje potřebu předepsaných vzorů názvů tříd CSS. Jednoduchým odstraněním potřeby správy názvů tříd může @scope zmírnit strach spojený s CSS ve velkých projektech.
Základní použití
Chcete-li začít, přidejte do svého CSS pravidlo @scope a vložte kořenový selektor, na který se budou styly vztahovat:
@scope (
Pokud bychom tedy například zaměřovali styly na prvek
@scope (nav) { a { /* Styly odkazů v rámci rozsahu navigace */ }
a:active { /* Aktivní styly odkazů */ }
a:active::before { /* Aktivní odkaz s pseudoprvkem pro další styling */ }
@media (max. šířka: 768 pixelů) { a { /* Responzivní úpravy */ } } }
To samo o sobě není převratná funkce. K rozsahu však lze přidat druhý argument a vytvořit tak spodní hranici, která účinně definuje počáteční a koncové body rozsahu.
/* Žádný prvek uvnitř ul nebude mít aplikované styly */ @scope (nav) to (ul) { a { velikost písma: 14px; } }
Tato praxe se nazývá donut scoping a existuje několik přístupů, které lze použít, včetně řady podobných, vysoce specifických selektorů pevně spojených se strukturou DOM, pseudoselektoru :not nebo přiřazování konkrétních názvů tříd k prvkům v rámci
Závěr Rámce CSS založené na užitných vlastnostech, jako je Tailwind, fungují dobře pro prototypování a menší projekty. Jejich výhody se však rychle zmenšují při použití ve větších projektech zahrnujících více než pár vývojářů. Vývoj front-endu je v posledních letech stále více komplikovaný a CSS není výjimkou. I když pravidlo @scope není všelékem, může snížit potřebu složitých nástrojů. Při použití místo nebo vedle strategického pojmenování tříd může @scope usnadnit a zpříjemnit psaní udržovatelných CSS. Další čtení
CSS @scope (MDN) „CSS @scope“, Juan Diego Rodríguez (CSS-Tricks) Poznámky k vydání Firefoxu 146 (Firefox) Podpora prohlížeče (CanIUse) Populární frameworky CSS (stav CSS 2024) „C“ v CSS: Cascade, Thomas Yip (CSS-Tricks) Úvod do BEM (Získat BEM)
