Nejste omezeni na jednu třídu CSS na každý prvek.
Kaskádové styly (CSS) vám umožňují definovat vzhled prvku tím, že se vložíte do atributů, které aplikujete na daný prvek. Tyto atributy mohou být buď ID a třída a stejně jako všechny atributy přidávají užitečné informace elementům, ke kterým jsou připojeny. V závislosti na atributu, který přidáte k prvku, můžete napsat selektor CSS, který použije potřebné vizuální styly, které jsou potřebné k dosažení vzhledu prvku a webu jako celku.
Zatímco buď ID nebo třída pracují za účelem vnášení do nich pomocí pravidel CSS, moderní metody návrhu webových stránek upřednostňují třídy nad ID, a to zčásti, protože jsou méně specifické a jednodušší s nimi pracovat. Ano, stále najdete mnoho stránek, které používají identifikátory, ale tyto atributy se používají mnohem šetrněji než v minulosti, zatímco třídy převzaly moderní webové stránky.
Jedno nebo více tříd v CSS?
Ve většině případů byste prvku přiřadili jedinému atributu třídy, ale ve skutečnosti se nejedná pouze o jednu třídu, kterou jste s identifikátory. Zatímco prvek může mít pouze jeden atribut ID, můžete absolutně dát prvek více tříd a v některých případech to udělá, aby vaše stránka byla snazší ve stylu a mnohem flexibilnější!
Pokud potřebujete k prvku přidělit více tříd, můžete přidávat další třídy a jednoduše je oddělovat mezerou ve svém atributu.
Tento odstavec má například tři třídy:
pullquote featured left "> Toto by byl text odstavce
Na tag odstavce jsou nastaveny následující tři třídy:
- Pullquote
- Doporučené
- Vlevo, odjet
Všimněte si mezer mezi každou z těchto třídních hodnot. Tyto prostory je to, co je vytváří jako různé, individuální třídy. To je také důvod, proč jména tříd nemohou mít v nich mezery, protože by to udělalo jako samostatné třídy.
Pokud jste například použili funkci "pullquote-featured-left" bez mezery, byla by to jedna hodnota třídy, ale výše uvedený příklad, kde jsou tato tři slova oddělena mezerou, je nastavuje jako jednotlivé hodnoty. Je důležité pochopit tuto koncepci, když se rozhodujete, které hodnoty třídy se mají používat na vašich webových stránkách.
Jakmile máte hodnoty ve třídě v HTML, pak je můžete přiřadit jako třídy ve vašem CSS a použít styly, které byste chtěli přidat. Například.
.pullquote {...}
.featured {...}
p.left {...}
V těchto příkladech by CSS deklarace a hodnoty dvojice by byly uvnitř kudrnaté příchytky, což je způsob, jak tyto styly by byly použity na příslušný selektor.
Poznámka - pokud nastavíte třídu na určitý prvek (například p.left), můžete jej stále používat jako součást seznamu tříd; uvědomte si však, že bude mít vliv pouze na ty prvky, které jsou specifikovány v CSS. Jinými slovy, styl p.left bude platit pouze pro odstavce s touto třídou, protože váš selektor ve skutečnosti říká, že jej použije pro "odstavce s hodnotou třídy" left "." Naproti tomu další dva selektory v příkladu neurčují určitý prvek, takže by se vztahovaly na jakýkoli prvek, který používá tyto hodnoty třídy.
Výhody více tříd
Více tříd může usnadnit přidávání speciálních efektů prvkům bez nutnosti vytvořit pro tento prvek zcela nový styl.
Například možná budete chtít mít schopnost rychle pohybovat prvky vlevo nebo vpravo . Můžete napsat dvě třídy vlevo a vpravo pouze float: left; a plovák: vpravo; v nich. Poté, kdykoli máte prvek, který potřebujete k odchodu doleva, jednoduše přidáte třídu "vlevo" do jeho seznamu tříd.
Tam je tu jemná linka k procházce tady, nicméně. Nezapomeňte, že webové standardy diktují oddělení stylu a struktury. Struktura je zpracována prostřednictvím HTML, zatímco styl je v CSS.
Je-li váš dokument HTML vyplněn prvky, které mají všechny názvy tříd jako "červená" nebo "levá", což jsou názvy, které diktují, jak by měly prvky vypadat spíše než to, co jsou, přecházíte mezi strukturu a styl. Z tohoto důvodu se snažím co nejvíce omezit své nesémantické názvy tříd.
Více tříd, sémantika a JavaScript
Další výhodou použití více tříd je to, že vám dává mnohem více možností interaktivity.
Nové třídy můžete použít na stávající prvky pomocí jazyka JavaScript, aniž byste museli odstranit libovolnou výchozí třídu. Můžete také použít třídy k definování sémantiky prvku . To znamená, že můžete přidat další třídy pro definování toho, co tento prvek znamená sémanticky. Tak funguje Microformats.
Nevýhody více tříd
Největší nevýhodou použití několika tříd na vašich prvcích je to, že jim může být trochu těžkopádné, aby se mohli časem podívat a řídit. To může být obtížné určit, jaké styly ovlivňují prvek a zda nějaké skripty ovlivňují. Mnoho rámců, které jsou dnes k dispozici, jako Bootstrap, těžce využívají prvky s více třídami. Tento kód se může dostat z rukou a těžko pracovat velmi rychle, pokud nejste opatrní.
Používáte-li více tříd, vystavujete se také riziku, že styl jednoho druhu převyšuje styl jiného, i když jste o to neměli v úmyslu. To pak může způsobit, že je těžké zjistit, proč nejsou vaše styly aplikovány, i když se zdá, že by měly být.
Musíte si být vědom specifičnosti, a to i s atributy aplikovanými na jeden prvek!
Pomocí nástroje, jako jsou nástroje pro webmastery v prohlížeči Chrome, můžete jednodušeji vidět, jak vaše třídy ovlivňují vaše styly a vyhnout se tomuto problému konfliktních stylů a atributů.
Původní článek Jennifer Krynin. Upraveno Jeremy Girardem dne 8/7/17