Vícenásobné třídy

Znáte vícenásobné třídy? Pokud je pro vás HTML a CSS více než příležitostným odreagováním, pak byste je znát měli. Vícenásobné třídy zefektivní zápis kaskádových stylů, zvýší jejich odolnost proti chybám a v konečném důsledku ušetří čas a peníze.

Tedy, vícenásobné třídy. Jak začít? Nejlépe praktickým příkladem. Řekněme, že na webu používáme několik druhů boxů, mezi kterými jsou jisté rozdíly, ale vzhledově jsou si příbuzné. Mohou být třebas stejné tvarem, ale různé barvou. Zde je ilustrační obrázek:

Náhled barevných boxů

Konvenční způsob

Konvenční způsob, který považuji za špatný, a který by podle mého názoru bez rozmyslu použili čtyři z pěti webdesignerů, velí založit dvě třídy box1 a box2 a v kaskádových stylech psát sady pravidel pro obě třídy. Zde je ukázkový zápis CSS a HTML:

.box1,
 .box2 {margin:1em 0}
.box1 h3,
 .box2 h3 {margin:0.2em 0; font-size:100%; color:#3F3F3F}
.box1 .in,
 .box2 .in {padding:5px 9px; border:1px solid #3F3F3F; background-color:#dadada}
.box2 h3 {color:#804000}
.box2 .in {background-color:#FFE1C4; border-color:#804000}

<div class="box1">
  <h3>Box 1</h3>
  <div class="in"> Lorem ipsum ... </div>
</div>
<div class="box2">
  <h3>Box 2</h3>
  <div class="in"> Dolor sit ... </div>
</div>

Ještě jednou opakuji, že tento postup považuji za špatný. Zápis pravidel pro více prvků oddělených čárkami není přehledný již při dvou boxech, s přidáním dalšího boxu by se stával ještě více nepřehledný a zvyšovalo by se riziko vnesení chyby do stylopisu.

Vícenásobné třídy

Tento příklad je totiž jako dělaný pro vícenásobné třídy, řešení to podle mého názoru málo známé a proto minimálně používané. Podstatou je, že HTML umožňuje jeden prvek zatřídit pod více identifikátorů — atributu class se nezadá jedna třída, ale hned celý seznam oddělený mezerou.

Konkrétně pro náš příklad založíme tři třídy: box, box1 a box2. Do třídy box přiřadíme všechny boxy, třídou box1 nebo box2 pak už pouze určíme barevné schéma. Zde je upravený příklad:

.box {margin:1em 0}
.box h3 {margin:0.2em 0; font-size:100%}
.box .in {padding:5px 9px; border:1px solid black}
.box1 h3 {color:#3F3F3F}
.box2 h3 {color:#804000}
.box1 .in {background-color:#dadada; border-color:#3F3F3F}
.box2 .in {background-color:#FFE1C4; border-color:#804000}

<div class="box box1">
  <h3>Box 1</h3>
  <div class="in"> Lorem ipsum ... </div>
</div>
<div class="box box2">
  <h3>Box 2</h3>
  <div class="in"> Dolor sit ... </div>
</div>

No uznejte, není tento zápis přehlednější? Vytvoření dalších barevných variací už by bylo daleko snazší - přidali bychom dvě sady pravidel, .box3 h3 a .box3 .in {} a do třídy box bychom vůbec nezasahovali. Pamatujte, čím přehlednější je zápis stylů, tím méně často vznikají nevyzpytatelné problémy vniklé ze zapomenuté čárky mezi zápisem prvků apod…

Na závěr jedna obligátní poznámka: Vícenásobné třídy podporují samozřejmě všechny dnešní prohlížeče, které ke stylopisům pouštíme, vyjmenovávat je snad nemusím. Tolik pro dnešek k tématu vícenásobných tříd.

Související:

Komentáře

1. Jirka Ch – 6. dubna 2006, 15:19

Honzo skvělý článek! Já bych jen dodal, že efektivita nevyniká jen v podobných případech. Já používám například třídy: center, left, right, small, grey, float-left a podobně. Názvy jsou snad dost výmluvné.

Je myslím zřejmé jak se pak snadno dělají i jednoduché věci typu: <p class="small center grey">Popisek u obrázku</p> a podobně.

Nezastírám, že jsem podobné konstrukce okoukal od Pavla Kouta :-) při implementaci jeho layoutů.

2. rarouš – 6. dubna 2006, 15:27

Hezké řešení, ale má to jeden háček, tak jak to popisuješ, to jsou více násobné třídy v (X)HTML, ale máme tu i vícenásobné třídy v CSS, v tomto případě, by podle mě bylo lepší použít právě ty, protože předpokládáš, že třídy box a boxn (kde n je přirozené číslo) budou v (X)HTML použity jako vícenásobné, ale v praxi tomu tak být nemusí. Proto by byl správnější zápis .box.boxn {…}. Tím je zaručena správná interpretace pro vícenásobné třídy. Ale to zase neumí pan IE6-.

3. Shaman – 6. dubna 2006, 15:51

Vícenásobné třídy skutečně velice zeefektivňují práci kodéra, určitou nezmíněnou nevýhodou však může být jejich obtížnější použití v různých CMS s implementovanými WYSIWYG editory — ty si běžně poradí s jednou třídou, ale neumí kombinovat více tříd dohromady.

4. Pavel Kout – 6. dubna 2006, 16:43

[3] Ale to je už jiná pohádka :-)
[2] Ehm? IE? podporovat ten zmetek pokročilejší selektory, tak bychom se často vyhnuli i těm vícenásobným třídám.

5. Jakub Vrána – 6. dubna 2006, 17:53

Jen doplním, že s vícenásobnými třídami by měly počítat i skripty. Např. BBText dovoluje omezit kontext pomocí class="bbtext", ale s class="bbtext clanek" si neporadí.

6. Plaváček – 6. dubna 2006, 20:00

[4] Miluji pohádky. A nevím, co máte proti IE? Já s ním v pohodě žiju už deset let, skoro bych řekl, že jsme oddáni. Že se občas chová jako zpupná manželka, to je fakt. Ale takový je přeci život, ne? :-)

7. Aleš Janda – 6. dubna 2006, 22:51

[1] Pokud ovšem používáš takovéto třídy, tak to můžeš rovnou použít inline styly. Vždyť jaký je rozdíl mezi <div class="float-left"> a <div style="float: left;">? Vzhled má být právě v CSS, takhle ho posunuješ do logiky.

Co kdybys chtěl ten box ne vlevo, ale vpravo? Přepíšeš jen ten CSS styl, nebo u daného prvku změníš třídu? Jestli musíš kvůli vzhledu změnit třídu, je to právě špatně.

Ale já vím, je to pohodlnější a sem tam to taky používám :-) (třeba class="uprostred").

8. dgx – 6. dubna 2006, 23:19

Toto řešení používám kdykoliv je to možné, ale s určitou obměnou - tou jsou "společné čitatele", dá-li se to tak nazvat. Čitatelé budou např. item1, item2, item3 a jmenovatelé box, menu, atd.

Potom tedy boxy rozliším jako class="box item1", "box item2" a podobně.

9. Borek – 6. dubna 2006, 23:57

Řešení je to rozhodně vynikající, ale jak píše Shaman, jsou s tím spojeny drobné praktické problémy (např. TopStyle si s vícenásobnými třídami moc nerozumí). Celkově ale souhlasím, že vícenásobné třídy jsou správnou cestou.

10. Jiří Sekera – 7. dubna 2006, 08:26

[1] Na to, že by se i identifikátory a třídami měl popisovat především obsah je vícenásobná třída "small center grey" opravdu výmluvná. ;-)

Pozn. JB.: Komentář byl upraven.

11. Jirka Ch – 7. dubna 2006, 13:42

[7] Mimo jiné si tím mohu ušetřit případné problémy v tiskovém výstupu. Také při vypnutí stylů mi nic nikde neplave jak by nemělo.

Jinak je ale asi jasné, že class="float-left" se nemusí rovnat style="float:left", ale mohu si do třídy třeba přidat nejaké marginy, paddingy a podobně.

[10] Že jo :-) a to si vem, že to vážně používám.

Váš komentář

K článku nelze připojit komentář, Mraveniště bylo zakonzerováno.


Copyright © Jan Bien.
W3C XHTML 1.0  | W3C CSS 2  | UAW adaptive  | Geo URL  | RDF RSS