Skupinové výběry CSS pro zlepšení zatížení
Účinnost je důležitým faktorem úspěšné webové stránky. Tato stránka by měla být efektivní v tom, jak využívá obrázky online . To pomůže zajistit, aby stránky fungovaly dobře pro návštěvníky a rychle načítaly na svých zařízeních. Účinnost by měla být také součástí vašeho celkového procesu, což vám pomůže udržet pokrok v čase a rozpočtu.
Nakonec efektivita hraje roli ve všech aspektech tvorby webových stránek a dlouhodobých úspěchů, a to i ve stylech, které jsou napsány pro stránky CSS daného webu. Díky tomu, že je možné vytvářet štíhlejší, čistější soubory CSS, je ideální a jedním ze způsobů, jakým to můžete dosáhnout, je seskupení více výběrů CSS dohromady.
Seskupení selektorů
Při seskupování voličů CSS použijete stejné styly na několik různých prvků, aniž byste opakovali styly v listu stylů. Namísto toho, že máte dvě nebo tři nebo více CSS pravidel, které všechny dělají totéž (například nastavte barvu něčeho na červenou), máte jedno pravidlo CSS, které pro vaši stránku dosáhne.
Existuje řada důvodů, proč tato "seskupení selektorů" má prospěch stránky. Nejdůležitější je, že stylový list bude menší a rychlejší. Je pravda, že stylové listy nejsou jedním z hlavních viníků, pokud jde o místa s pomalým nakládáním. Soubory CSS jsou textové soubory, takže i opravdu dlouhé CSS listy jsou malé ve srovnání s neoptimalizovanými obrázky. Přesto se každý malý počet počítá, a pokud můžete oholení nějaké velikosti vašeho CSS a načítat stránky mnohem rychleji, je to vždycky dobrá věc.
Obecně platí, že nadprůměrné zatížení míst je méně než 3 sekundy; 3 až 7 sekund je průměrné a více než 7 sekund je příliš pomalé. Tyto nízké počty znamenají, že k dosažení těchto cílů je třeba udělat vše, co je možné! To je důvod, proč můžete pomoci udržet vaše stránky rychle pomocí skupinových voličů CSS.
Jak seskupit výběr CSS
Chcete-li seskupit výběry CSS do listu stylů, použijete čárky k oddělení více skupinových voličů ve stylu. V následujícím příkladu styl ovlivňuje prvky p a div:
div, p {barva: # f00; }}Čárka v podstatě znamená "a". Tento volič se tedy vztahuje na všechny prvky odstavce a všechny prvky dělení. Pokud by čárka chyběla, místo toho by se jednalo o všechny odstavcové prvky, které jsou dítkem rozdělení. To je velmi odlišný druh selektoru, takže tato čárka opravdu mění význam selektoru!
Každá volba může být seskupena libovolným jiným voličem. V tomto příkladu je volič třídy seskupen s voličem ID:
p.red, #sub {barva: # f00; }}Takže tento styl platí pro každý odstavec s atributem třídy "červená" a jakýkoli prvek (protože jsme neurčili, který druh) má atribut ID "sub".
Můžete seskupit libovolný počet voličů dohromady, včetně voličů, které jsou samostatnými slovy a přepínačů výběru. Tento příklad obsahuje čtyři různé voliče:
p, .red, #sub, div a: odkaz {barva: # f00; }}Toto pravidlo CSS by se tedy vztahovalo na následující:
- Libovolný odstavec
- Jakýkoli prvek s třídou "červené"
- Každý prvek s ID "sub"
- Pseudo-třída "propojení" kotevních prvků, které jsou dekadenty dělení.
Ten poslední selektor je složený selektor. Vidíte, že je snadné kombinovat s ostatními selektory v tomto pravidle CSS. Tímto pravidlem nastavíme barvu # f00 (která je červená) na těchto čtyřech voličích, což je lepší než zapsat 4 samostatné selektory pro dosažení stejného výsledku.
Další výhodou seskupování selektorů je to, že pokud potřebujete provést změnu, můžete upravit jedno CSS pravidlo namísto více. To znamená, že tento přístup vám ušetří váhu a čas stránky, pokud jde o údržbu webu v budoucnu.
Každá volba může být seskupena
Jak je vidět z výše uvedených příkladů, každý platný selektor může být umístěn ve skupině a všechny prvky dokumentu, které odpovídají všem seskupeným prvkům, budou mít stejný styl založený na vlastnosti daného stylu.
Někteří lidé dávají přednost tomu, aby seskupili prvky na samostatných řádcích, aby byly čitelné v kódu. Vzhled na webu a rychlost načítání zůstávají stejné. Můžete například kombinovat styly oddělené čárkami do jednoho stylu vlastností v jednom řádku kódu:
th, td, p.red, div # firstred {barva: červená; }}
nebo můžete seznam stylů na jednotlivých řádcích pro přehlednost:
th,
td,
p.red,
div # první
{{
červená barva;
}}
Každá metoda, kterou použijete pro seskupení více výběrů CSS, urychlí váš web a usnadní správu stylů dlouhodobě.
Původní článek Jennifer Krynin. Upraveno Jeremy Girardem 5.8.17.