Proč jednoduchá čárka zjednodušuje kódování
CSS nebo kaskádové styly jsou průmyslovým designem průmyslu akceptovaným způsobem přidávání vizuálních stylů k webu. Pomocí funkce CSS můžete ovládat rozvržení stránky, barvy, typografii , obrázek na pozadí a mnoho dalšího. V podstatě, pokud je to vizuální styl, CSS je způsob, jak přenést tyto styly na vaše webové stránky.
Jakmile přidáte styly CSS k dokumentu, můžete si všimnout, že dokument začíná být delší a delší. Dokonce i malý web s pouze několika stránkami může skončit velkým souborem CSS - a velmi velké stránky s množstvím stránek jedinečného obsahu mohou mít velmi velké soubory CSS. To se skládá z citlivých webů, které obsahují spoustu mediálních dotazů obsažených ve stylových listech, které mění způsob, jakým vizuální vzhled vypadá a jak se stránka zobrazuje pro různé obrazovky.
Ano, soubory CSS mohou být dlouhé. To není velký problém, pokud jde o výkonnost webu a rychlost stahování, protože i dlouhý soubor CSS bude pravděpodobně malý (protože je to opravdu jen textový dokument). Přesto se každý kousek počítá, pokud jde o rychlost stránky, takže pokud můžete vytvořit stylový štítek, je to dobrý nápad. To je místo, kde "čárka" může přijít velmi užitečné ve vašem stylu listu!
Čárky a CSS
Možná jste se zajímali, jakou roli hraje čárka v syntaxi výběru CSS . Stejně jako ve větách, čárka přináší oddělovačům jasnost - ne kód. Čárka v přepínači CSS odděluje více výběrů ve stejných stylech.
Podívejme se například na níže uvedený CSS.
th {barva: červená; }}
td {barva: červená; }}
p.red {barva: červená; }}
div # nejprve {barva: červená; }}
S touto syntaxou říkáte, že chcete, aby tagy, tagy td , odstavcové značky s červenou třídou a značka div s identifikátorem prvního čísla byly všechny červené.
To je zcela přijatelné CSS, ale existují dvě významné nedostatky při psaní tímto způsobem:
- V budoucnu, pokud se rozhodnete změnit barvu písma těchto vlastností na modrou, musíte tuto změnu provést čtyřikrát ve stylu listu.
- Do listu stylů přidáte spoustu dalších znaků, které nepotřebujete. Tyto čtyři styly nemusí vypadat jako přehnané, ale pokud budete pokračovat v této práci v celém vašem stylovém listu, řádky se přidávají a tento list bude mnohem, mnohem větší, než je třeba.
Chcete-li se vyhnout těmto nevýhodám a zefektivnit soubor CSS, zkuste použít čárky.
Použití čárkami pro oddělené výběry
Namísto psaní 4 samostatných voličů CSS a 4 pravidel můžete všechny tyto styly spojit do vlastností jednoho pravidla oddělením jednotlivých výběrových prvků čárkou. Zde je návod, jak to udělat:
th, td, p.red, div # firstred {barva: červená; }}
Znak čárky v podstatě funguje jako slovo "a" uvnitř voliče. Tak se to týká značek a tagů td a značek odstavců s třídou červené a značky div s prvním číslem. To je přesně to, co jsme měli předtím, ale místo toho, abychom potřebovali 4 pravidla CSS, máme jediné pravidlo s více selektory. To je to, co čárka dělá v selektoru, umožňuje nám mít více selektorů v jednom pravidle.
Tento přístup nejen přispívá k vytvoření šikovnějších a čistších souborů CSS, ale také usnadňuje budoucí aktualizace. Nyní, pokud jste chtěli změnit barvu z červené na modrou, musíte provést změnu pouze v jednom místě namísto přes původní pravidla čtyř stylů, které jsme měli! Přemýšlejte o těchto časových úsporech v celém souboru CSS a uvidíte, jak to ušetří čas i prostor v dlouhé runě!
Variance syntaxe
Někteří lidé se rozhodli udělat CSS čitelnější tím, že oddělí každý volič na jeho vlastní řádku, namísto toho, aby vše napsal na jednom řádku, jak je uvedeno výše. Takto by se tak dalo:
th,
td,
p.red,
div # první
{{
červená barva;
}}
Všimněte si, že za každým voličem umístíte čárku a pak použijete "enter" pro přerušení dalšího voliče na jeho vlastní řádek. Po konečném výběru nepřidáte čárku.
Použitím čárky mezi výběry vytvoříte kompaktnější stylový list, který se v budoucnu snadněji aktualizuje a dnes je jednodušší číst!
Původní článek Jennifer Krynin. Upraveno Jeremy Girardem 5.8.17