Udržovatelný stylopis: pořádek v souborech, pozor na hacky a !important

Udržovatelnosti kaskádových stylů prospívá také konzistence ve struktuře souborů, jejich pojmenovávání a obsahu. A víte, proč jsou hacky z pekla? Opět z osobní zkušenosti, tedy subjektivně.

Dnešní článek patří do rubriky Subjektivně. Jejím cílem je zejména poskytovat prostor pro názory a pohledy na aktuální dění v oblasti webových technologií i na jejich vývoj do budoucna. Jedná se o osobní názory, které se nemusí vždy shodovat s názory redakce. Pokud máte co říct, pojďte k nám psát Subjektivně.

Posledně jsme v článku Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava popsali hlavní zásady udržovatelného stylopisu. Dnes k nim přidáme několik rad.

Hacky a dobrý kód nejsou kamarádi

Hacky vnímám jako konstrukce, které využívají chyb prohlížečů. V pekle, kde jsou kodéři nuceni pracovat se špatným kódem, jsou nejbližšími Luciferovými pomocníky.

Hacky jsou vázané na konkrétní chyby konkrétních verzí prohlížečů, a tak nikdy nevíme, co se s nimi stane za měsíc nebo rok. Můžeme jen čekat a pak se divit, jako když nejznámější hack — podtržítkový pro IE6 — přestal fungovat v IE7. Nikdy nevíme, co s naším hackem provede některá příští verze prohlížeče.

Hacky v drtivé většině slouží pro rozpoznání MS Internet Exploreru, typicky jeho šesté verze. Toho však daleko lépe dosáhneme podmíněnými komentáři, kterým se budeme věnovat dále.

Jak důležité je šetřit s !important

„Nikdy není tak zle, aby bylo !important”, říkám si raději pokaždé. Klauzule !important zajistí, aby vlastnost nebyla nikdy v budoucnu přepsána. Může se hodit, ale většinou se zneužívá pro „tvrdé přebití” hodnoty nějaké vlastnosti. Jako pneumatickým kladivem na komára. Pro přebíjení máme naštěstí krásné pravidlo o podrobnějším selektoru.

Centrální stylopis, mozek našeho CSS

Centrální („bridging” nebo „housing”) stylopis je kromě „tiskového” a „explorerového” jediným, který linkuji z HTML hlavičky. Šetřím tím HTTP dotazy a také svoji práci při změnách nalinkování pluginů a frameworků z HTML. V centrálním stylopisu dodržuji jednotnou strukturu. Rychleji se v něm pak zorientuji, když se přepínám mezi různými projekty.

Co v něm najdete?

Hlavičku: Může se stát, že správu projektu po vás převezme někdo, kdo nebude mít možnost zjistit jeho autora. Uveďte zde popis stylopisu, název projektu a kontakt na sebe.
Import frameworků: Osobně zde typicky importuji resetovací a typografickou část Blueprintu.
Import pluginů: To když je potřeba využít cizí knihovny. Ty je lepší izolovat do vlastních CSS souborů a zde na ně odkazovat. Typickým pluginem v mém stylopisu je upravená verze FancyBoxu.
Indexy: V případě, že komentáře na produkční verzi automaticky odstraňujete, považuji za lepší je mít v centrálním stylopisu (soupis indexů najdete v minulém článku). V opačném případě je dejte do externího textového souboru.
Helpery (pomocné třídy): Různorodí pomocníci, kteří jsou platní skrze celý projekt — definice vzhledu zpráv pro uživatele, externích odkazů, třídy označující načítání obsahu AJAXem nebo vývojovou verzi projektu.
Layout: Struktura layoutu celého projektu — hlavička, obsah nebo případně patička.
Jednotlivé stránky: Stránky nebo „šablony” společné pro více stránek si označím třídou nebo identifikátorem v <body> a buď zde definuji vzhled specifických prvků nebo předefinuji vzhled obecných prvků layoutu.
Typografie: Definice vzhledu prvků s textem. Myslím, že je rozumné si tyto prvky v dokumentu označit obecnou třídou a zde nadefinovat vzhled všech možných HTML značek. Zejména u částí, kde se vypisuje uživatelský obsah, je potřeba dopředu myslet i na katastrofické scénáře.
Opakující se prvky stránek: Například stránkování nebo fotogalerie.

Příklad hlavičky:

/*
Centralni stylopis webu Prazskeho Jara (www.festival.cz)
Autor: Martin Michalek, Studio Shortcat, michalek@shortcat.cz
*/

/* ===== Import Blueprint CSS a pravidel jej upravujich ===== */
@import "./blueprint.css";
@import "./blueprint-extra.css";


/* ===== Import pluginu ===== */
@import "./calendar.css";
@import "./fancybox.css";
@import "./sifr.css";

/* ===== Z-index "index" =====
Karusel:
1 .jcarousel-list - vsechny prvky karuselu
2 .jcarousel-clip - viditelna cast karuselu v jCarouselu

...

/* ===== Helpery ===== */

.loading
{
 ...
}

...

CSS soubory mají stejné pojmenování a strukturu napříč projekty

Podobně jako ve struktuře centrálního stylopisu, i ve struktuře souborů považuji za nutné udržovat jednotnost. V mém adresáři CSS souborů pak najdete:

index.css — centrální stylopis. Mozek projektu. Pojmenujte si jej, jak chcete, osobně se rád sjednocuji s programátory.
ie6.css, ie7.css — často jsem oba slučoval do ie.css, což ale není správná cesta. Každá verze potenciálně odlišného prohlížeče by měla mít vlastní stylopis. Jen tak definitivně utečete z pasti hacků.
print.css — tiskové styly.
blueprint.css — z Blueprint CSS využívám hlavně resetovací a typografická pravidla. Zde se hodí malá poznámka: využití jeho vlastností pro specifikaci layoutu mimo prototypování udržovatelnosti stylopisu spíše škodí, proto se jim u projektů poslední dobou vyhýbám.
pluginy a styly cizích knihoven (například fancybox.css, sifr.css)

Příklad připojení stylopisu z HTML hlavičky

<link href="/css/index.css" media="all" rel="stylesheet" type="text/css">
<!--[if IE 6]><link href="/css/ie6.css" media="all" rel="stylesheet" type="text/css"><![endif]-->
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css">

U menších projektů je možné tiskový stylopis přesunout do centrálního s pomocí pravidla pro oddělení média: @media print { ... }

Vyhýbám se colors.css a další slučujícím stylopisům

Někteří kodéři používají „dceřiné” stylopisy pro konkrétní typ pravidel — popis typografie, barev, rozměrů. Argumentem bývá oddělení pravidel, která se „mohou měnit”. Jenže…

Všechna pravidla jednotlivých prvků jsou zpravidla spojité nádoby (typografie souvisí s barvou) a úpravy prvků na více místech nebývají právě radostné.
Slučující stylopisy často vybízejí ke sjednocování definic prvků podobných vlastností, což je velmi nešťastné pro následné ladění (viz obrázek Firebugu).
Změny v barevnosti lze udržovat lépe pomocí indexu barev a jejich nahrazováním v centrálním stylopisu.

Špatná optimalizace pro Firebug: Stylopis colors.css obsahuje pravidlo s příliš velkým počtem selektorů

Závěr

„Udržovatelností stylopisu” se zabývám asi rok a myslím, že aktuální stav mých myšlenek je spíše úvodem do problematiky než hotovým řešením.

Na podobné myšlenky jsem v posledních měsících narazil i u jiných — zabývá se tím například Russ Weakly nebo Natalie Downe. Prakticky celé současné hnutí kolem CSS frameworků žene dopředu snaha o zvýšení efektivity kóderské práce, kterého dosahuje i udržovatelný stylopis.

Martin Michálek se zabývá praktickým webdesignem od roku 1997. Posledních 7 let ve studiu Shortcat. Aktuálně se kromě jiného koncentruje na efektivitu webdesignérské práce. Píše blog Vzhůru dolů.

Anketa

Používáte important?

	Ano, často.
	Ano, čas od času.
	Jen opravdu výjimečně.
	Ne, nikdy.

Zobraz výsledek

Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.