Nie ste obmedzený na jednu triedu CSS na prvok.
Kaskádové štýly (CSS) vám umožňujú definovať vzhľad prvku tým, že sa pripojíte do atribútov, ktoré aplikujete na daný prvok. Tieto atribúty môžu byť buď ID alebo trieda a ako všetky atribúty pridávajú užitočné informácie k elementom, ku ktorým sú pripojené. V závislosti od toho, ktorý atribút pridáte prvku, môžete napísať selektor CSS, aby ste použili potrebné vizuálne štýly, ktoré sú potrebné na dosiahnutie vzhľadu a pocitu pre daný prvok a webovú stránku ako celok.
Zatiaľ čo ID alebo trieda pracujú za účelom zapojenia sa do nich pomocou pravidiel CSS, moderné metódy navrhovania webových stránok uprednostňujú triedy identifikátorov, čiastočne preto, že sú menej špecifické a ľahšie pracujú s celkovým. Áno, stále nájdete veľa stránok, ktoré používajú ID, ale tieto atribúty sa používajú šetrnejšie ako v minulosti, kým triedy prevzali moderné webové stránky.
Jedno alebo viac tried v CSS?
Vo väčšine prípadov by ste priradili jednému atribútu triedy elementu, ale v skutočnosti nie ste obmedzený len na jednu triedu, tak ako ste s ID. Zatiaľ čo prvok môže mať iba jeden atribút ID, môžete absolútne dať prvku viacerým triedam a v niektorých prípadoch to urobíte tak, že vaša stránka bude jednoduchšia v štýle a oveľa flexibilnejšia!
Ak potrebujete priradiť viacerým triedam prvok, môžete pridať ďalšie triedy a jednoducho ich oddeliť medzerou v atribúte.
Tento odsek má napríklad tri triedy:
pullquote featured left "> Toto by bol text odseku
Týmto sa na značku odseku nastavia tieto tri triedy:
- Pullquote
- predstavoval
- ľavý
Všimnite si medzery medzi každou z týchto hodnôt triedy. Tieto priestory sú to, čo ich odlišuje od jednotlivých tried. To je tiež dôvod, prečo triedy názvy nemôžu mať medzery v nich, pretože tým by ich nastavil ako samostatné triedy.
Napríklad, ak ste použili "pullquote-featured-left" bez medzery, bola by to jedna hodnota triedy, ale vyššie uvedený príklad, kde sú tieto tri slová oddelené medzerou, ich nastavuje ako jednotlivé hodnoty. Je dôležité porozumieť tomuto konceptu pri rozhodovaní o tom, ktoré hodnoty triedy sa majú používať na vašich webových stránkach.
Keď máte hodnoty triedy v jazyku HTML, môžete ich priradiť ako triedy do svojho CSS a použiť štýly, ktoré by ste chceli pridať. Napríklad.
.pullquote {...}
.featured {...}
p.left {...}
V týchto príkladoch by boli dvojice deklarácií a hodnôt CSS vo vnútri zakrivených zátvoriek, čo je spôsob, akým by sa tieto štýly aplikovali na príslušný selektor.
Poznámka - ak nastavíte triedu na konkrétny prvok (napríklad p.left), môžete ho stále používať ako súčasť zoznamu tried; uvedomte si však, že bude mať vplyv iba na tie prvky, ktoré sú špecifikované v CSS. Inými slovami, štýl p.left sa bude vzťahovať iba na odseky s touto triedou od momentu, kedy váš selektor v skutočnosti hovorí, že ho aplikuje na "odseky s hodnotou triedy" vľavo ". Na rozdiel od toho dva ďalšie selektory v príklade neurčujú určitý prvok, takže by sa vzťahovali na ľubovoľný prvok, ktorý používa tieto hodnoty triedy.
Výhody viacerých tried
Viaceré triedy môžu uľahčiť pridávanie špeciálnych efektov prvkom bez nutnosti vytvoriť pre tento prvok úplne nový štýl.
Napríklad, možno budete chcieť mať možnosť plávať prvky vľavo alebo vpravo rýchlo. Môžete napísať dve triedy vľavo a vpravo iba float: vľavo; a plávať: vpravo; v nich. Potom, kedykoľvek máte prvok, ktorý potrebujete, musíte plávať doľava, jednoducho pridajte triedu "vľavo" do svojho zoznamu tried.
Tam je tu jemná línia chodiť tu, však. Nezabudnite, že webové štandardy diktujú oddelenie štýlu a štruktúry. Štruktúra je spracovaná prostredníctvom HTML, zatiaľ čo štýl je v CSS.
Ak je váš dokument HTML naplnený prvkami, ktoré majú všetky názvy triedy ako "červená" alebo "ľavá", čo sú názvy, ktoré diktujú, ako majú vyzerať prvky, a nie to, čo sú, prekračujete túto čiaru medzi štruktúrou a štýlom. Snažím sa z tohto dôvodu maximálne obmedziť moje názvy triedy, ktoré nie sú sémantické.
Viacnásobné triedy, sémantika a JavaScript
Ďalšou výhodou pri používaní viacerých tried je to, že vám ponúka mnoho ďalších možností interaktivity.
Nové triedy môžete použiť na používanie existujúcich prvkov pomocou JavaScriptu bez odstránenia ktorejkoľvek z počiatočných tried. Tiež môžete použiť triedy na definovanie sémantiky prvku . To znamená, že môžete pridať ďalšie triedy na definovanie toho, čo tento prvok znamená sémanticky. Tak funguje Microformats.
Nevýhody viacerých tried
Najväčšou nevýhodou pri používaní viacerých tried na vašich prvkoch je to, že môžu byť trochu ťažkopádne, aby sa mohli pozrieť a spravovať v priebehu času. Môže sa stať ťažké určiť, aké štýly ovplyvňujú prvok a či na ne pôsobia skripty. Mnoho rámcov, ktoré sú dnes k dispozícii, ako napríklad Bootstrap, používajú ťažké prvky s viacerými triedami. Tento kód sa môže dostať z ruky a ťažko pracovať s veľmi rýchlo, ak nie ste opatrní.
Ak používate viacero tried, taktiež riskujete, že štýl pre jednu triedu bude mať vplyv na štýl iného, aj keď ste na to nemali v úmysle. To potom môže ťažko zistiť, prečo sa vaše štýly nepoužívajú, aj keď sa zdá, že by mali.
Musíte si byť vedomí špecifičnosti, dokonca aj s atribútmi aplikovanými na jeden prvok!
Pomocou nástroja, ako sú nástroje pre správcov webu v prehliadači Chrome, môžete ľahšie zistiť, ako vaše triedy ovplyvňujú vaše štýly a vyhnúť sa tomuto problému s konfliktnými štýlmi a atribútmi.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 8/7/17