Prečo jednoduchá čiarka zjednodušuje kódovanie
CSS alebo kaskádové štýly, sú priemyselným odvetvím webového dizajnu akceptovaným spôsobom pridania vizuálnych štýlov k webovým stránkam. S CSS môžete ovládať rozloženie stránky, farby, typografiu , obrázok na pozadí a oveľa viac. V podstate, ak je to vizuálny štýl, CSS je spôsob, ako tieto štýly priniesť na vaše webové stránky.
Keď pridáte štýly CSS do dokumentu, môžete si všimnúť, že dokument začína byť dlhší a dlhší. Dokonca aj malé stránky s iba niekoľkými stránkami môžu skončiť s veľkým súborom CSS - a veľmi veľké stránky s množstvom stránok jedinečného obsahu môžu mať veľmi veľké súbory CSS. To sa skomplikuje prostredníctvom odpovedajúcich webových stránok, ktoré obsahujú veľa dopytov v médiách, ktoré sú zahrnuté v štýloch štýlov, aby zmenili spôsob zobrazenia vizuálnej podoby a stránky, ktoré sa zobrazujú na rôznych obrazovkách.
Áno, súbory CSS môžu byť dlhé. To nie je veľký problém, pokiaľ ide o výkonnosť stránok a rýchlosť sťahovania, pretože aj dlhý súbor CSS bude pravdepodobne dosť malý (pretože je to naozaj len textový dokument). Napriek tomu každý kúsok sa počíta pri rýchlosti stránok, takže ak dokážete vytvoriť štýl štíhlejší, je to dobrý nápad. To je miesto, kde "čiarka" môže prísť veľmi šikovne vo vašom štýle listu!
Čiarky a CSS
Možno ste sa zaujímali, akú úlohu hrá čaro v syntaxe výberu CSS . Rovnako ako vo vetách, čiarka prináša do separátorov jasnosť - nie kód. Čiarka v prepínači CSS oddeľuje viacero výberov v rovnakých štýloch.
Pozrime sa napríklad na niektoré CSS nižšie.
th {farba: červená; }
td {farba: červená; }
p.red {farba: červená; }
div # prvé {farba: červená; }
S touto syntaxou hovoríte, že chcete, aby štítky, tagy td , odsekové značky s červenou triedou a značka div s ID najprv všetky mali farbu štýlu červenú.
To je úplne prijateľné CSS, ale existujú dva významné nevýhody pri jeho písaní týmto spôsobom:
- V budúcnosti, ak sa rozhodnete zmeniť farbu písma týchto vlastností na modrú, musíte túto zmenu urobiť štvornásobne vo svojom štýle.
- Pridáva veľa štyroch znakov do vášho štýlu, ktorý nepotrebujete. Tieto štyri štýly sa nemusia zdajú byť nadmerné, ale ak budete pokračovať vo svojej celej šablóne štýlov, riadky sa pridávajú a tento hárok bude oveľa väčší ako je potrebné.
Ak sa chcete vyhnúť týmto nevýhodám a zefektívniť váš súbor CSS, skúsime použiť čiarky.
Použitie čiar na oddelenie výberu
Namiesto písania 4 samostatných voličov CSS a 4 pravidiel môžete všetky tieto štýly skombinovať do jedného pravidla, oddeľovaním jednotlivých výberov čiarou. Tu je postup, ako to urobiť:
th, td, p.red, div # prvé {farba: červená; }
Čiarka čiarka v podstate slúži ako slovo "a" vo vnútri selektora. Takže to platí pre tagy a tagy td a tagy s odstavcami triedy a štítok div s prvým ID. To je presne to, čo sme mali predtým, ale namiesto toho, aby sme potrebovali 4 pravidlá CSS, máme jediné pravidlo s viacerými selektormi. To je to, čo čiarka robí v selektore, umožňuje nám mať viac selektorov v jednom pravidle.
Tento prístup nielenže prináša štíhlejšie, čistejšie súbory CSS, ale taktiež uľahčuje budúce aktualizácie. Teraz, ak ste chceli zmeniť farbu z červenej na modrú, stačí vykonať zmenu na jednom mieste namiesto pôvodných pravidiel štýlu 4, ktoré sme mali! Premýšľajte o týchto úsporách času v celom súbore CSS a uvidíte, ako to ušetrí čas i priestor v dlhej rune!
Variácia syntaxe
Niektorí ľudia sa rozhodli urobiť CSS čitateľnejší tým, že oddelia každý volič na vlastnej linke, namiesto toho, aby všetko napísal na jednom riadku, ako je uvedené vyššie. Takto by sa to urobilo:
th,
td,
p.red,
div # firstred
{
farba: červená;
}
Všimnite si, že za každým voličom umiestnite čiarku a potom použite "enter" na prerušenie ďalšieho voliča na jeho vlastný riadok. Po konečnom voličovi nepridávate čiarku.
Pomocou čiarok medzi výberovými prvkami vytvoríte kompaktnejší štýl, ktorý sa v budúcnosti jednoduchšie aktualizuje a je dnes čitateľnejší!
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 5/8/17