Jak psát CSS přehledně a logicky

5. května 2004

•

Kaskádové styly (CSS) jsou na současných webech čím dál tím více využívány, a proto se zvětšuje i rozsah a komplexnost stylových předpisů. Je tedy stále nutnější psát CSS tak, abychom se v něm vyznali, a to i po delší době nebo ve větších týmech. A právě o tom je tento článek.

Úvodem bych rád předeslal, že v tomto článku budu mluvit převážně o obecně vžitých postupech, jak psát CSS přehledně a logicky. V některých případech ale budu vycházet i ze svých zkušeností a z toho, jak to připadá logické a přehledné mně osobně. Samozřejmě tyto postupy nikomu nevnucuji ani netvrdím, že bez nich bude vaše CSS nepřehledné. Pokud již máte zažity vlastní postupy, klidně u nich zůstaňte – důležité je, aby váš zápis byl přehledný a logický pro vás (a případně pro někoho, kdo bude CSS zápis po vás číst).

Struktura stylového předpisu

Nejprve si řekneme něco o tom, jak stylový předpis uspořádat. Stylový předpis je tvořen pravidly a takzvanými @-pravidly (et-pravidly).

Na úplném začátku by se měla nacházet @-pravidla @charset a @import (v tomto pořadí). Doporučení CSS jejich použití jinde nepřipouští.
Jako další by měla následovat pravidla formátující prvky obecně (tedy bez identifikátorů a tříd) – jako první pravidlo pro <body> a dále pravidla pro:
- nadpisy,
- seznamy (<ul>, <ol> a <dl>),
- odstavce,
- odkazy,
- významové prvky (<em>, <dfn>, <cite>, <abbr>, <blockquote>…),
- formulářové prvky (<form>, <fieldset>, <input>…),
- tabulky…
Dále je vhodné uvést obecné třídy – tedy ty, které používáme u různých prvků a nejsou s žádným spojeny, například:
.zvyrazneni {
font-weight: bold;
}
Jako další připadají pravidla formátující třídy spojené s určitým prvkem:
p.kod {
font-family: monospace;
}
Jako poslední potom uvádíme pravidla pro konkrétní prvky určené svým id:
#navigace {
border: 1px solid blue;
}

Tyto prvky byste měli uvádět v určitém pořadí, například nejdříve zformátovat logo, potom hlavní obsah stránky a nakonec navigaci – můžete použít i pořadí, v jakém se prvky nacházejí v kódu stránky.

Pokud se ve vašem předpisu vyskytují @-pravidla @media, doporučuji je uvést na úplném konci předpisu, díky čemuž budou moci pravidla zde uvedená bez problémů přepsat ostatní pravidla v předpisu (která jsou obvykle určena pro všechna média).

Jak psát pravidla

Pro pravidla se obvykle používá tento zápis:

selektor {
  první deklarace;
  druhá deklarace;
  …
}

Tedy například:

#clanek p#uvod {
font-size: 120%;
font-weight: bold;
}

Deklarace jsou odsazeny dvě mezery od okraje, což je obvykle považováno za „tak akorát“. Používat ale samozřejmě můžete i menší nebo větší odsazení.

Důležité je, že se selektor i deklarace vlastností nacházejí na samostatných řádcích. To pravidlo zpřehledňuje – na první pohled vidíte, o který prvek se jedná a které vlastnosti jsou nastavovány. Je zde také prostor pro komentáře, které se mohou nacházet hned vedle selektoru nebo vedle deklarace, které se týkají.

Středník patří za každou deklaraci

Doporučení CSS říká, že středník slouží jako oddělovač jednotlivých deklarací, za poslední deklarací v pravidle se tedy uvádět nemusí. Já vám ale doporučuji uvádět ho za všemi deklaracemi, tedy i za tou poslední. Jinak se zákonitě stane, že budete muset časem jednu deklaraci přidat a na středník už zapomenete:

p.obrazek {
  color: gray;
  font-size: 80%     /* tato deklarace byla poslední */
  text-transform: uppercase;
}

A nevěřili byste, jak dlouho vám bude trvat, než odhalíte, že právě zapomenutý středník je příčinou špatného zobrazení…

Dodržujte pořadí vlastností

V pravidle je jedno, kterou vlastnost uvedete dříve a kterou až později. V zájmu přehledného zápisu je ale dobré dodržovat alespoň nějaké pořadí. Já obvykle uvádím pravidla v následující posloupnosti:

barva písma a vlastnosti pozadí (color, background-color…),
vlastnosti písma (font-size, text-transform, font-style…),
pozicovací vlastnosti (position, left, z-index, float…),
vlastnosti boxu (display, border, margin, padding, width, visibility, overflow…).

Méně používané či hodně specifické vlastnosti (vertical-align, cursor, list-style, border-collapse a další) uvádím nakonec nebo tam, kde se mi v konkrétním pravidle zdají logické.

Se správným pořadím vlastností to ale příliš nepřehánějte, abyste nestrávili nad jejich řazením více času než nad stylováním webu. Je pouze dobré alespoň podvědomě nějaký pořádek dodržovat, abyste u rozsáhlých pravidel nemuseli procházet všechny deklarace, když třeba chcete zjistit velikost písma.

Syntaxe ID selektorů

U ID selektorů je povolený jak zápis jméno-prvku#ID-prvku (například p#uvod), tak i #ID-prvku (například #uvod).

Logicky lepším zápisem je ten první, tedy i se jménem prvku – říká nám totiž, jaký prvek formátujeme, bez toho, abychom se museli dívat do kódu stránky. Většinou ale používáme ID selektory u prvků <div>, ideální tedy je používat jména u všech prvků kromě <div> (například na prvek <div id="logo"> se tedy budeme ve stylu odkazovat pomocí #logo, zatímco na prvek <p id="uvod"> pomocí p#uvod). Jednak si tím ušetříme psaní a jednak se nám bude snadněji hledat úsek stylu, který formátuje konkrétní objekt, třeba navigaci (nebudeme se muset zastavovat u každého selektoru začínajícího na div#). Zároveň ale budeme moci z každého ID selektoru poznat, o jaký se jedná prvek.

U ID selektorů uvádějte předky prvku

Každý konkrétní prvek (dopředu víme, o jaký prvek se jedná a kde je ve stránce použit) by měl být v selektoru zařazen do struktury stránky – měly by být uvedeny prvky, uvnitř kterých se nachází. Díky tomu se nebudeme muset dívat do kódu stránky, když například budeme chtít zjistit, od kterých prvků přebírá náš prvek dědičné vlastnosti. Také bude náš stylový předpis logičtější a pochopitelnější.

Pokud je třeba součástí navigace vyhledávací formulář a my chceme formátovat pole pro zadání textu, které se zde nachází, měli bychom použít následující pravidlo:

#navigace form#vyhledavaciFormular input#vyhledavaciPole {
…
}

Pravidla byste také měli uvádět v pořadí podle jejich nejvyššího předka, takže všechny prvky, které jsou uvnitř navigace, by se ve stylovém předpisu měly nacházet na jednom místě.

Jak nastavovat rámečky, výplně a okraje

Pro nastavování rámečků, výplní a okrajů se většinou používají takzvané sdružené vlastnosti (margin, border-bottom a další), které nastaví vždy více vlastností najednou (například velikost okraje na všech stranách prvku).

U vlastností rámečků je obvykle vhodné nejprve nastavit všechno pomocí vlastnosti border a potom zahrnout do zápisu případné odlišnosti (pozdější deklarace přebijí ty dřívější). Pokud například chceme na horní, levé a dolní straně prvku použít černý tečkovaný rámeček a na pravé straně červený tvořený dvěma linkami, použijeme tento zápis…

#prvek {
border: dotted black;
border-right: double red;
}

…a ne tento zbytečně dlouhý zápis:

#prvek {
  border-top: dotted black;
  border-left: dotted black;
  border-bottom: dotted black;
  border-right: double red;
}

U vlastností pro velikost okraje a výplně se většinou používá k nastavení odlišných hodnot pro různé strany vlastnost margin respektive padding:

#prvek {
padding: 10px 20px 10px 10px;
margin: 1em 0 2em;
}

Používejte komentáře

Jedním z nejdůležitějších pravidel pro vytvoření logického a přehledného CSS je používání komentářů. Na ty byste neměli zapomínat u žádných složitějších konstrukcí a hlavně u hacků – ty jsou často tak nelogické, že pomalu už po týdnu nevíte, proč jste ten který hack použili.

Pomocí komentářů byste také měli celý stylový předpis rozdělit na části, například na část, kde se formátují odkazy, na část, kde se formátuje navigace a podobně (jak jsme si již řekli na začátku tohoto článku).

A to je vše k logickému a přehlednému CSS, tedy z mojí strany. Doufám, že pro vás bude tato chvíle naopak startovacím bodem…