CSS Cascade Layers: budou vrstvy revolucí organizace stylů?

Vzhůru dolů 25.01.2023 01:00 Kaskádové vrstvy jsou novinka, která webařům umožňuje měnit platnost deklarací bez nutnosti uvádět je na konkrétní místo v CSS souboru a v konkrétním pořadí. Obecně vzato, CSS Cascade Layers poskytují strukturovaný způsob uspořádání stylů. Slouží tak ke zjednodušení práce s kaskádou v CSS a hlavně specificitou selektorů. Dejme si jednoduchý příklad: @layer framework @layer override @layer framework } Vývojářky a vývojáři mohou díky pravidlu @layer vytvářet vrstvy pro reprezentaci výchozích nastavení prvků, knihoven třetích stran, motivů vzhledu nebo komponent. Není přitom nutné přizpůsobovat tomu selektory v rámci jednotlivých vrstev nebo se spoléhat na pořadí zdrojů při řešení konfliktů. Zároveň nám kaskádové vrstvy poskytují možnost přeskupovat pořadí platnosti deklarací: @layer base, framework, override; @layer framework @layer base Podpora této části specifikace CSS Cascade Layers ve všech moderních prohlížečích je plná. To hlavně díky tomu, že prohlížeče aktuálně velmi dobře spolupracují. V textu vám ukážu několik příkladů, jak to pro vás může být užitečné. Nejprve vám ale zkusím vysvětlit, proč si myslím, že kaskádové vrstvy jsou skoro až revolučně užitečné. Věčný boj s kaskádou Už od vzniku CSS před více než více než čtvrt stoletím se uživatelé CSS dělí do dvou skupin. Související „Problémy“ CSS Kaskáda a specificita Dědičnost v CSS Kaskádové vrstvy Selektory v CSS Pseudotřídy v CSS Menší skupina , která CSS miluje i se všemi nedostatky. Ve druhé skupině sedí drtivá většina běžných vývojářů, kteří CSS používají, protože nemají jinou možnost. Kaskádové styly tyto vývojáře více či méně štvou a principy návrhu CSS obvykle nechápou. Dělicí linkou mezi těmito skupinami je často chápání kaskády v CSS a jejich vlastností – dědičnosti, důležitosti a hlavně specificity selektorů. Myslím, že příchod kaskádových vrstev je dobrá zpráva pro tu první skupinu. A skvělá zpráva pro tu druhou. Obvyklý vývoj a hlavně úpravy CSS probíhají v první skupině vývojářek a vývojářů podle metodik, z nichž je pro tyto účely nejdůležitější ITCSS. V druhé skupině se často prostě přidávají deklarace na konec souboru a doufá se, že to pomůže: #content .btn .btn .btn Poznáváte svůj kód? Jenže klíčové slovo !important a důležitost v CSS je určena pro jiné účely, a tudíž tohle je trošku prasárna. No, možná i více než trošku… Řešení s kaskádovými vrstvami je jednoduché. Prostě si jednotlivé části CSS izolujeme do relativně nezávislých vrstev: @layer base } @layer override } Ano, je to přesně tak, kaskáda platí jen uvnitř konkrétních kaskádových vrstev. Rozhoduje jen pořadí vrstev, tak, jak jsou uvedené v CSS nebo jak jej specifikujete na začátku CSS souboru pomocí pravidla @layer. Jeden původ, jeden origin Je dobré akcentovat, že kaskádové vrstvy organizují styly v rámci jednoho původu . V CSS jich může být více – prohlížečové styly, autorské styly , uživatelské styly. Tzn. pomocí @layer nelze například z autorských stylů „vstoupit“ do prohlížečového originu. Příklad s Bootstrapem: bez vrstev V dalším textu vám Cascade Layers představím krok za krokem pomocí jednoduchého příkladu s přestylováním Bootstrapu. Začneme příkladem bez vrstev. Framework nejprve importujeme, pak přestylujeme: @import url ; body .btn Na první pohled nám to přestylování takto půjde dobře. V prohlížeči dostaneme, co jsme chtěli, tedy přebarvené a tlačítko: Problém však nastává při najetí myši na tlačítko . Barva nezůstává taková, jakou jsme nastavili. Důvodem je vyšší specificita původního selektoru: .btn:hover .btn Původní selektor s vyšší specificitou tedy vyhrává a naše změna barvy se neaplikuje. Co s tím? Jak už jsem psal, můžeme to přetížit selektorem stejné nebo vyšší specificity. Můžeme přidat důležitost pomocí !important. Nebo jinak a lépe – můžeme použít kaskádové vrstvy. Příklad s Bootstrapem: vrstvy vrství V další ukázce už jsem použil Cascade Layers a trošku zkomplikoval ty přebíjené vlastnosti: @import url layer ; @layer my-styles } @layer my-base .btn } Jak je vidět, kromě změny barvy pozadí ještě obarvuji rámečky tlačítek na červeno. Najednou to celé funguje. Výše uvedené problémy nevidíme. Specificita selektorů Bootstrapu nás už netrápí, protože se aplikuje jen uvnitř vrstev. Příklad s Bootstrapem: změna pořadí vrstev Můžeme to celé ještě vylepšit. Pravidlo @layer totiž využíváme buď pro vložení deklarací do vrstvy nebo deklaraci pořadí vrstev. To druhé vypadá takto: @layer bootstrap, my-base, my-styles; Deklaraci zbylého kódu necháme v původním pořadí, ale vzhled stránky se změní. Tlačítka nebudou mít červenou barvu rámečku, protože vrstva my-base je přepsaná vrstvou my-styles. Prostě lusknete prsty a všechny bolehlavy s nutností dodržovat pořadí v kódu a hlídat specificitu jsou pryč. Vrstvy vrství a já se raduju. Dávám lajk. Proč vrstvy neexistovaly už před patnácti lety…?! Odbočka k !important Než budeme pokračovat, je potřeba udělat odbočku k další části kaskády. Tou je důležitost pravidel a klíčové slovo !important. Důležitost totiž kromě zvýšení váhy konkrétní deklarace také obrátí pořadí priority. To je velmi důležité. Stejně to funguje také u kaskádových vrstev. Deklarace, kde použijete !important, budou měnit pořadí. Příklad s Bootstrapem: použijeme !important Do našeho příkladu s frameworkem Bootstrap nyní přidáme důležitost: @layer bootstrap, my-base, my-styles; @import url layer ; @layer my-styles } @layer my-base .btn } Vzhledem k pořadí deklarace kódu byste mohli čekat, že tlačítka budou šedivá , ale ony jsou hnědá . Důvodem je obrácené skládání vrstev v případě použití !important. Deklarace z vrstvy my-base prostě dostane přednost, protože je níže než vrstva my-styles. Abych to ještě doplnil o poslední dílek skládačky, v pořadí hrají roli i deklarace neuvedené ve vrstvách: Nejníže deklarace z jednotlivých vrstev podle pořadí, které jste jim nastavili. Uprostřed jsou deklarace nezařazené do vrstev. Nejvýše pak platí deklarace s !important, ovšem v opačném pořadí než jsou uvedené vrstvy. Je to docela galimatyáš, že? Ale má to dobré důvody. Nejlépe to uvidíte na obrázku: Když už nemůžeš, vrstvi víc. Když už nemůžeš vrstvit, přidej důležitost. Připravil jsem k tomuto ještě tři CodePeny. Jsou o praktickém využití nebo spíše trablech přebíjení !important, které nám nadělil Bootstrap. V kódu frameworku najdete tyto řádky: Nechme teď stranou důvody, proč bychom to měli chtít přebíjet ve svém kódu. Řekněme, že opravdu moc chceme. V takovém případě nám ovšem vložení pravidla pro přebití do vrstev nepomůže . Musíme přebíjející pravidlo ponechat mimo vrstvy . Alternativně pak můžeme vrstvy použít, ale vložit přebíjející pravidlo ještě pod styly Bootstrapu: @import my-styles, bootstrap; @import url layer ; @layer my-styles } Vnořování vrstev Alespoň stručně ještě zmíním možnost vnořování vrstev, který rozebírají na skvělém MDN: @layer framework } Podpora v prohlížečích Prohlížeče jsou na tom skvěle, díky za optání. Chrome podporuje @layer od verze 99, Safari od verze 15.4 a Firefox od verze 97. Ke dni psaní tohoto textu, což je listopad 2022, je tedy podpora dostupná ve všech moderních prohlížečích. Více je jako vždy na caniuse.com/css-cascade-layers. Závěr Vrstvy jsou skvělý nástroj, který nám umožní vytvářet kaskádové styly, které budou přehlednější a také snadněji udržovatelné. Jsou navržené tak, aby mohly způsobit revoluci v organizaci CSS. Zároveň je možné je použít tak, aby se vůbec nezměnila naše běžná práce. Taky je možné, že se běžná práce kodérů vůbec nezmění a @layer se stane něčím, co se používá jen ve výjimečných případech. Rozdíly mezi teorií a praxí jsou totiž v oblasti organizace CSS velmi časté. Tak či tak – mám z přítomnosti vrstev v CSS velkou radost a věřím, že vám pomohou, stejně tak jako vám doufám pomohl i tento článek. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .