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

Technická dokonalost kaskádových stylů je samozřejmostí a nestojí už takové úsilí. Vyplatí se však začít klást důraz na udržovatelnost. Rozumíte svému stylopisu? Je jednotný, nebo spíše připomíná Babylón? Subjektivní pohled z praxe s ukázkami kódu.

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?

Zen Garden

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

Rozumíte svému stylopisu?

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 81

Přehled komentářů

yossarian RE: Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava
ph0enix RE: Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava
Martin Michálek RE: Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava
Hoween Špatný příklad
VfB Re: Špatný příklad
Mingan Re: Špatný příklad
Hoween Re: Špatný příklad
WuDo Re: Špatný příklad
Hoween Re: Špatný příklad
Miloslav Lešetický Re: Špatný příklad
Hoween Re: Špatný příklad
Miloslav Lešetický Re: Špatný příklad
karf Re: Špatný příklad
VfB Re: Špatný příklad
Hoween Re: Špatný příklad
Martin Michálek Re: Špatný příklad
Hoween Re: Špatný příklad
Radovan Re: Špatný příklad
Hoween Re: Špatný příklad
Radovan Re: Špatný příklad
Lokutus Re: Špatný příklad
mofo Re: Špatný příklad
Ash Re: Špatný příklad
Hoween Re: Špatný příklad
Radovan Re: Špatný příklad
garcon Re: Špatný příklad
david-binda Webdeveloper, Firebug
Martin Michálek Re: Webdeveloper, Firebug
Hoween Re: Webdeveloper, Firebug
Martin Michálek Re: Webdeveloper, Firebug
Hoween Re: Webdeveloper, Firebug
Martin Michálek Re: Webdeveloper, Firebug
Radovan Re: Webdeveloper, Firebug
Anonym Re: Webdeveloper, Firebug
VfB Re: Webdeveloper, Firebug
Hoween Re: Webdeveloper, Firebug
luboskmetko Jednoriadkovy zapis pravidiel
karmi Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
karmi Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
karmi Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
Radovan Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
Radovan Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
Radovan Re: Jednoriadkovy zapis pravidiel
Karel Re: Jednoriadkovy zapis pravidiel
Martin Michálek Re: Jednoriadkovy zapis pravidiel
Hoween Re: Jednoriadkovy zapis pravidiel
Martin Michálek Re: Jednoriadkovy zapis pravidiel
luboskmetko Re: Jednoriadkovy zapis pravidiel
ITGuru Moje pravidla
Martin Michálek Re: Moje pravidla
ITGuru Re: Moje pravidla
r1.tarmaq inline?
Hoween Re: inline?
r1.tarmaq Re: inline?
Anonym Re: inline?
alian tip na web
Ja. abeceda
mofo Re: abeceda
Ja. Re: abeceda
Gappa Můj styl
Gappa Re: Můj styl
Hoween Re: Můj styl
Gappa Re: Můj styl
Gappa Re: Můj styl
Jan Sládek výhody inline zápisu + pár odkazů do světa
luboskmetko Re: výhody inline zápisu + pár odkazů do světa
Jan Sládek Re: výhody inline zápisu + pár odkazů do světa
Martin Michálek Re: výhody inline zápisu + pár odkazů do světa
Jan Sládek Re: výhody inline zápisu + pár odkazů do světa
Martin Michálek Re: výhody inline zápisu + pár odkazů do světa
quqwbaq quqwbaq
Anonym Kill code monkeys
ivusko pod seba a tabulatorovat
aprilchild OMG
JanJanuska diskusia
petr.steinbauer Můj styl
Zdroj: https://www.zdrojak.cz/?p=2962