Kaskádové styly v dobrém stylu

29. července 2002

•

O kaskádových stylech (Cascading Style Sheets) se píše čím dál častěji, čím dál více webmasterů je přijímá za své, a stránky formátované výhradně pomocí CSS rostou jako houby po dešti. Bohužel, současně přibývá i chyb, kterých se autoři stránek při aplikaci CSS dopouštějí.

Nemám však na mysli chyby přímo způsobující nekorektní zobrazení stránek nebo prohřešky proti normě CSS. Ty by se mi do jednoho článku určitě nevešly. Chci psát o chybném stylu kódování, což je sice téma poněkud subtilnější, avšak neméně významné. Stylové chyby totiž snižují efektivitu a přehlednost kódu, a tím i jeho odolnost vůči chybám vážnějším. Zároveň též degradují největší výhody CSS, úspornost použití a snadnou správu stránek.

Než budete pokračovat ve čtení, vezměte prosím v úvahu, že se tento článek týká pouze stránek, které jsou vytvořeny ve standardním (X)HTML dle některé ze striktních norem a které ke svému formátování plně (včetně layoutu) využívají CSS. Rady, obsažené v článku, většinou nelze aplikovat na tradičně tvořené stránky s takzvaným tabulkovým layoutem, jejichž vzhled má být jednotný v prohlížečích modernějších (IE5+, NN6+) i starších (IE4, NN4).

Používejte externí stylové předpisy

Jak jistě víte, stylové předpisy (style sheets, česky též stylopis) mohou být umístěny v samostatném souboru, v hlavičce dokumentu v prvku style nebo přímo v jednotlivých XHTML prvcích v atributu style. Pro základní použití v konečných verzích dokumentů se hodí pouze první způsob. Druhý je vhodný spíše pro ladění a třetí slouží pro zcela výjimečné případy.

Hlavní výhody externího stylového předpisu jsou tři:

Jeden externí stylový předpis zajistí konzistentní styl celému webu (nebo jeho části).
Stylový předpis se načte jen s první stránkou a pak se již kešuje.
Externí stylový předpis lze snadno ukrýt před staršími prohlížeči, které by ho nedokázaly správně interpretovat.

Nepoužívejte obecné XHTML prvky zbytečně

S nástupem kaskádových stylů se rozšířily i obecné XHTML prvky div a span, které dříve nebyly skoro potřeba. Možná vás překvapím tvrzením, že nejsou příliš potřeba ani na stránkách plně formátovaných CSS, alespoň ne v takové míře, v jaké je často vídám.

Prvky div a span v kombinaci s třídou (class) nebo identifikátorem (id) se hodí pouze tehdy, když pro danou strukturální funkci neexistuje vhodná XHTML značka. V případě blokového div to jsou nejčastěji oblasti stránky (záhlaví, zápatí, hlavní text, okrajový sloupec), v případě řádkového span to může být třeba drobná poznámka v textu.

Naopak pro menu, zvýrazněný název firmy nebo ukázku zdrojového kódu by vždy měly být použity adekvátní prvky XHTML, jejichž specifičnost se vyznačí třídou. V uvedených příkladech tedy <ul class="menu">, <em class="nasefirma"> a <code class="prikladkodu">.

Class nebo id?

Jedním z častých dotazů v různých konferencích bývá, kdy používat třídy class a kdy identifikátory id. Pravidlo je jednoduché – smí-li být daný prvek v dokumentu pouze jednou, je správnější id, v opačném případě se musí použít class.

Někteří určitě namítnou, že je to přeci jedno. Kdekoli může být identifikátor, může být i třída, tak proč se nějakými identifikátory zabývat? Jenže identifikátory nejsou neužitečné. Systematické a správné používání atributu id zvyšuje přehlednost kódu a jeho odolnost proti chybám. Tomu, kdo se podívá do kódu, je hned jasné, že prvek označený id smí být v dokumentu maximálně jednou a kdykoli si může validátorem ověřit, že je tomu opravdu tak.

Malé modré může být i velké červené

Častou chybou je též nevhodné pojmenování tříd. V případě layoutu bývá identifikátor nazván například pravysloupec nebo třída cervenepismo. Během vývoje stránek se však pravý sloupec přestěhuje doleva a z původně červeného písma se stane žluté. Výsledkem je dokonalý zmatek, ve kterém se nevyzná ani sám autor.

Třídy a identifikátory proto pojmenovávejte zásadně podle jejich funkce či strukturálního významu, ne podle toho, jak nyní vypadá pro ně definovaný styl. Název chybovehlaseni tedy bude určitě lepší než cervenyramecek.

Nedopusťte, aby se vám přemnožily třídy

Typický XHTML kód začátečníka v CSS se hemží třídami. Výjimkou není například toto:

<h2 class=“nadpisclanku“>Nadpis</h2>
<p class=“odstavecclanku“>…</p>
<p class=“odstavecclanku“>…</p>
…
<p class=“odstavecclanku“>…</p>

Tuto situaci však lze mnohem efektivněji řešit vymezením strukturálního bloku pomocí prvku div a kontextovými selektory. XHTML kód by tedy měl správně vypadat nějak takto:

<div class=“clanek“>
  <h2>Nadpis</h2>
  <p>…</p>
  <p>…</p>
  …
  <p>…</p>
</div>

Ve stylovém předpisu pak již jen nadefinujete pravidla pro kontextové selektory:

.clanek h2 {…}
.clanek p {…}

Použijte jednu třídu pro různé prvky

Podobně jako není dobré, když se vám přemnoží třídy v XHTML kódu, není dobrý ani nadbytek názvů tříd. Neustále nové názvy tříd se špatně vymýšlejí a ještě hůře pamatují. CSS přitom nabízí elegantní mechanismus, jak tentýž název třídy použít v různém významu.

Představte si, že chcete například odlišně formátovat první písmeno odstavce, první odstavec článku nebo první položku seznamu (odhlédněte, prosím, od toho, že pro tento konkrétní účel CSS nabízí pseudoprvky, je to jen příklad). Ve všech třech případech však bude formátování odlišné. Potřebujete na to tři třídy? Nikoli, stačí vám jedna a tyto tři definice:

p span.prvni {…} /* pro první písmeno odstavce */
p.prvni {…} /* pro první odstavec v článku */
li.prvni {…} /* pro první položku seznamu */

Použijte více tříd pro jeden prvek

Vyšší efektivity, přehlednosti a udržovatelnosti kódu lze často dosáhnout i tím, že do jedné třídy sdružíte vždy ta pravidla, která se používají společně, a na některé XHTML prvky pak aplikujete více těchto „modulárních“ tříd současně – jde o takzvané vícenásobné třídy.

Pokud tedy často potřebujete šedé pozadí, tučnou kurzívu, barevné zvýraznění nebo libovolnou kombinaci těchto tří vlastností, nemusíte si připravit více tříd než tyto tři:

.pozadi {
  background-color: #ccc;
}
.tucnakursiva {
  font-weight: bold;
  font-style: italic;
}
.barevna {
  color: #f00;
}

V XHTML kódu pak již můžete tyto třídy libovolně kombinovat, tedy například <p class="pozadi tucnakursiva"> nebo <span class="tucnakursiva barevna">. Takto vám vícenásobné třídy ušetří většinu práce a výrazně zpřehlední kód.

Kaskádujte pravidla

K dobrému stylu patří i správné a důsledné využívání toho, že kaskádové styly kaskádují. Je tedy zbytečné psát všechny tyto definice:

h1 {
  font-family: „Arial CE“, Arial, sans-serif;
  font-weight: bold;
  font-size: 200%
}
h2 {
  font-family: „Arial CE“, Arial, sans-serif;
  font-weight: bold;
  font-size: 160%
}
h3 {
  font-family: „Arial CE“, Arial, sans-serif;
  font-weight: bold;
  font-size: 120%
}

Jednodušeji, přehledněji a úsporněji můžete napsat:

h1, h2, h3 {
  font-family: „Arial CE“, Arial, sans-serif;
  font-weight: bold;
}
h1 {
  font-size: 200%
}
h2 {
  font-size: 160%
}
h3 {
  font-size: 120%
}

Kaskádování však nespočívá jen v postupném přepisování či doplňování vlastností. Nové hodnoty lze i odvozovat z vlastností rodičovských. Můžete tak kaskádovat třeba velikost písma. Používáte-li například pro určení velikosti písma pixely, deklarujte v pixelech velikost jen jednou pro základní písmo a další odstupňování proveďte relativně procenty:

body {
  font-size: 14px;
}
h1 {
  font-size: 200%
}
#krajnisloupec {
  font-size: 85%
}

Snadno pak na jediném místě změníte různé velikosti písma pro celý webu.

Pozor na sdružené vlastnosti

Při kaskádování si ale dejte pozor na sdružené vlastnosti. Uvědomte si, že když například definujete…

p {
font: 14px sans-serif;
}

…ve skutečnosti tím říkáte:

p {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: normal;
  font-family: sans-serif;
}

Pokud tedy například uvedete za sebou v tomto pořadí tyto definice…

p, li {
font: 14px/1.5 sans-serif;
}
li {
font: 12px sans-serif;
}

…budou mít prvky li řádkování normal a nikoli 1.5.

Uspořádejte si stylový předpis

Přehlednost stylového předpisu (myšlen je zejména externí stylopis) zvýší a jeho údržbu usnadní vhodné systematické uspořádání. Praktický je například zvyk, zapisovat každé jednotlivé pravidlo na samostatný řádek, vždy ukončený středníkem, namísto dlouhé šňůry pravidel na jediném řádku. Usnadní vám to kopírování pravidel mezi jednotlivými selektory.

Dále je dobré nezapomenout, že i jazyk CSS nabízí komentáře vymezené znaky /* (začátek komentáře) a */ (konec komentáře). Pečlivě komentovanému stylovému předpisu budete po čase mnohem lépe rozumět než stlopisu nekomentovanému a snadno v něm naleznete to, co právě potřebujete změnit.

Na konec je dobré si zvyknout i na určitou posloupnost selektorů. Je v zásadně jedno jakou, hlavně že v tom máte nějaký systém, který dlouhodobě dodržujete. Já například vždy nejprve uvádím základní XHTML prvky (body, p, h1 a podobně), pak identifikátory (zpravidla vyznačující layout stránky) a nakonec třídy. Kontextové selektory řadím bezprostředně pod jejich selektory rodičovské.

Přeji vám a vašim stylům dobrý styl.