Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava

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 říci, pojďte k nám psát Subjektivně.

Kodeřina je hrozná dřina

„Kodeřina je hrozná dřina” — takový podtitul měl můj první blog v roce 2002. A nebylo divu. Procházeli jsme dramatickým vývojem ve využívání kaskádových stylů, válčili se zastaralými prohlížeči a zkoumali řešení, bez kterých si dnes nedovedeme představit práci client-side kodérů.

Svět kaskádových se dnes už dramaticky nevyvíjí a zdá se, že v nejbližší době ani nebude. Vizuální stránka webů neprochází jednou za rok či dva redesignem. Klíčovým slovem vývoje je evoluce nikoliv revoluce. Váš dnes napsaný stylopis vás bude doprovázet ještě za pár let.

Rozumíte svému stylopisu?

Technická dokonalost je samozřejmostí a nestojí už takové úsilí. Vyplatí se však začít klást důraz na udržovatelnost. Zeptejte se svého kódu: „Budu ti rozumět, až se k tobě za rok vrátím?”

Velká část mých starších stylopisů na otázku neodpoví. Nerozumí mi, stejně jako já nerozumím jim. A tak už rok hledám best practice — způsob, jak psát udržovatelný stylopis. Podělím se s vámi, k čemu jsem zatím dospěl. Zcela subjektivně.

Technicky precizní, validní stylopis totiž bude za rok k ničemu, je-li psán způsobem, kterému rozumíte jen vy a jen v tuto chvíli. Naopak, udržovatelný stylopis mluví sám. Budete mu rozumět i za rok vy, bude mu rozumět člověk, který po vás projekt převezme nebo kolega back-end vývojář, který do něj bude chtít doplnit pár pravidel. Udržovatelnému stylopisu bude rozumět i váš velký kamarád, Firebug. Ladění v něm bude ještě méně bolestné. Udržovatelný stylopis ušetří váš drahocenný čas a peníze vašich klientů.

Dva cíle a pět zásad udržovatelného stylopisu

Našim cílem je efektivita a také „radost z práce”. Hesla, která u leckterého webdesignéra budí pobavený úsměv. Ten pak po nocích kleje u vlastního špatného kódu.

Jaké jsou naše zásady?

1. čitelnost — kdykoliv bude kdokoliv chtít udělat zásah, měl by se vždy rychle zorientovat.
2. přenositelnost — izolovaný kus kódu můžu snadno vzít a přenést na jiný projekt, příkladem budiž plugin FancyBox nebo resetovací stylopis.
3. centralizace — nespravuji vlastnosti jednoho prvku na více místech.
4. dopředná kompatibilita — pro detekci prohlížečů nevyužívám konstrukcí, které využívají jejich aktuálních a často dočasných chyb. Maximálně dodržuji standardy, ty přetrvávají.
5. jednotnost — struktura CSS souborů, jejich obsahu a způsob pojmenovávání selektorů by měla být konzistentní i napříč projekty.

Začnu špatným příkladem:

#content #hlavicka2 p#menu li a { text-transform:uppercase;width:130px;
background:#4DBEE9;color:#292929;padding:10px 4px 10px 6px;display:block; } 

Komprese kódu je pro počítače, ne pro lidi

Vyzkoušel jsem snad všechny způsoby zápisu kaskádových stylů. A došel k tomu, že člověku nejčitelnější kód je vždy ten velikostně nejméně úsporný. Můj kód je velkorysý. Každé pravidlo má svůj vlastní řádek a je odsazeno. Kompresi kódu rád přenechám softwaru k tomu určenému, například Minify.

Náš příklad tedy „dekomprimuji” do čitelnější podoby. Seřadím vlastnosti — první dám vždy ty, které určují rozměry a pozici. Pozor na zkrácené zápisy — třeba vlastnost background se tváří nevinně, ale je nebezpečná. Kromě barvy vám předefinuje například i obrázek na pozadí.

#content #hlavicka2 p#menu li a
{
 width: 130px;
 padding: 10px 4px 10px 6px;
 display: block;
 float: left;
 text-transform: uppercase;
 background-color: #4DBEE9;
 color: #292929;
} 

Indexy a „ukecané” komentáře

Už vím, že nemusím šetřit komentáři. Počítač mi je na produkční verzi odstraní.

Komentáře mého stylopisu jsou hotový román. Najdete v nich:

• Matematiku prvního stupně ZŠ — tedy složitěji odvoditelné výpočty rozměrů prvků.
• Vysvětlení těžce pochopitelných jevů — stylopis pro IE6 je jich plný, často do komentářů přikládám odkazy na popis workaroundu nebo vysvětlení chyby.
• Index z-indexů — u webů s vyšším výskytem z-index vlastností dávám do specifikační části seznam všech z-indexů.
• Index barev — seznam všech použitých barev, jejich pojmenování a příklady použití.
• Specifikace layoutu — rozměry gridu, pravidla typografie. Layout a barvy by měly vzniknout ve spolupráci s designérem a u větších projektů narůst do manuálu stylu.

Správa indexů jde sice proti jedné ze zásad udržovatelného stylopisu (nedělat úkony na dvou místech), ale samotná jejich existence mu velmi prospívá (zvyšuje čitelnost). Bylo by skvělé, kdyby nám je uměl vygenerovat editor CSS, podobně jako to dělá Word.

Náš kód „okecám” a uvedu do souvislostí:

#content #hlavicka2 p#menu li a
{
 width: 130px; /* Celkem 150px - polovina sirky sloupce */
 padding: 10px 4px 10px 6px;
 ...
} 

Sémantické, jednoznačné a nekomplikované identifikátory

Názvy identifikátorů mají popisovat obsah, nikoliv formu ( .float-left-box není nejlepší řešení). Druhé pravidlo je, že by měly „umět mluvit”. Sebepopisnost je velmi důležitá  —  zásadně vynechávám zkratková pojmenování nebo babylónštinu – tedy nejednotnost jazyka ( .head-modry).

Babylónštna nesmí vzniknout ani při komunikaci s jinými členy týmu. Na posledním projektu například pojmenovávání přebírám z Rails controllerů od kolegy Karla Minaříka. Oba se pak shodneme na pojmenování určitých částí webu a nepotřebujeme překladatele.

Nesnažím se kaskádou popsat umístění prvku ve struktuře dokumentu. To se může snadno změnit. Proto před zápisem .page-home .articles .item dám přednost .home-page-article. Stejně tak se mohou změnit HTML prvky, proto na ně CSS selektory co nejméně navazuji ( #menu namísto  p#menu).

V našemu kódu odlehčíme selektor a ve výsledku bude vypadat takhle:

#navigation a
{
 width: 130px; /* Celkem 150px - polovina sirky sloupce */
 padding: 10px 4px 10px 6px;
 display: block;
 float: left;
 text-transform: uppercase;
 background-color: #4DBEE9;
 color: #292929;
} 

Zdá se, že k naší ukázkové definici se můžu za rok vrátit a rychle pochopit, co jsem jí myslel, nebo předat kolegovi, až se za dobře odvedenou práci odměním roční dovolenou v Karibiku.

Pokračování příště

V další části se podíváme od pravidel výše — na centrální stylopis a jednotnou strukturu souboru. Načneme také ožehavé téma: používat nebo nepoužívat hacky?

---

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ů.