Organizace CSS, verze 2014

Zčásti reakce na diskuzi u Frontendistů. Zčásti volné pokračování článku o udržovatelném stylopise na Zdrojáku.

Ten jsem psal v roce kdy Obamu inaugurovali prezidentem a zemřel Michael Jackson. 2009. Toto letí!

Obama je furt prezidentem, Jackson furt mrtvý, ale na frontendu se pár věcí změnilo.

Samozřejmě. Webdesign prochází responzivní revolucí. Do kódu se nám vplížily složitosti jako media queries a to nás tlačí k efektivnějšímu a přehlednějšímu psaní. CSS tohle ale samo o sobě nenabízí. Proto CSS preprocesory.

Dělat responzivní weby dobře je drahé a tak jsme nucení výrobu zefektivňovat. Proto větší důraz na znovupoužitelnost komponent, proto modulární systémy a Bower.

A nakonec — konečně se do kóderského mainstreamu dostala detekce vlastností. Nepíšeme tedy tolik kódu určeného jen pro staré prohlížeče. Smutní svědkové své doby — ie6.css a ie7.css— tiše přikyvují.

Adresářová struktura CSS zdrojáků

U mě to dnes obvykle vypadá nějak takto:

index.less
base/
core/
components/
layout/

Pojďme si to v následujícím textu trochu rozpitvat. K dispozici zde máte strukturu dvou projektů. První je příklad ze školení responzivního designu. Druhý pak zdrojáky stylů tohoto blogu.

index.less

Ať už ho nazvete jakkoliv, je to centrální mozek stylů. Může vypadat takto jednoduše nebo i trochu složitěji. Musí být ovšem patřičně stručný a samovysvětlující. Je to soubor, který vy nebo váš kolega otevřete jako první, když chcete zjistit, jak je projekt organizovaný.

Chytří lidé mě naučili jak moc důležité je, aby to v adresáři se styly byl vždy jediný soubor.

Typografická základna

/base/text.less
/base/fonts.less
/base/table.less 
…

Cože? Typografická základna? Říkejte třeba vertikální rytmus nebo lineární design, když chcete. Pro mě je to základní stavební vrstva, proto /base.

Čistě technicky bráno — stylujete tady základní HTML elementy, nepřidáváte moc tříd.

Můžete tady mít třeba resetovací CSS našich věků, Normalize.css, který sjednotí výchozí vzhled dokumentu napříč prohlížeči. Doporučuji jej ale raději nainstalovat pomocí Boweru.

text.less tvoří další vrstvu nad normalizací. Pro větší a související části základny je lepší mít zvláštní soubor — například table.less nebo map.less.

Ještě jeden soubor typický pro tenhle adresář – něco jako fonts.less co obsahuje deklarace webových fontů.

Programátorské jádro

/core/mixins.less
/core/helpers.less
/core/variables.less
…

V /core ta imperativnější (chcete-li programátorštější část kódu). Vše co mě usnadňuje psát další kód, ale samo o sobě nicmoc nedělá. Proměnné, vlastní mixiny nebo helper třídy. A taky to co se nevejde jinam. Tři tečky za „more…” jsou v adresáři /core. :)

Proměnné — krásné téma pro odbočku! Bacha, ať to s nimi nepřeženete. Ano, ve zdrojácích Bootstrapu jsou jich stovky. Jenže Bootstrap má velmi pravděpodobně zcela jiný scénář použití než zdrojáky vašeho projektu. Zvažte dvakrát, jestli hodnotu používáte tak často, že musí do proměnné. Ve svém kódu mám v proměnných obvykle jen základní barvy a nejdůležitější breakpointy v media queries.

Komponenty uživatelského rozhraní

/components/article-items.less
/components/buttons.less
/components/nav.less
/components/icons.less
…

U mě rozhodně největší kus kódu. A nejoblíbenější! Navigace, tlačítka, stránkování, seznamy článků… kostky Lega, ze kterých skládám uživatelská rozhraní webů.

Někdy je můžu použít na jiných projektech, někdy jsou znovupoužitelné jen v rámci aktuálního webu. Vždy jsou izolovány ve zvláštním souboru.

Pokud už modulární systém tvoříte, rozhodně zvažte možnost generování dokumentace. Je to skvělý komunikační nástroj mezi vývojáři, designéry i třeba produkťáky a dlouhodobě zefektivňuje vývoj.

O modulárních systémech by se dalo psát dlouho, ale už končím. Pokud jste s nimi ještě nezačali, udělejte to u Frontendistů!

Další soubory a adresáře

Občas jsem někde použil nebo používám často, ale vejde se do jedné odrážky:

• /layout — Rozvržení stránek patří sem. Obvykle ale používám hotovou mřížku, například z Bootstrapu. Proto tenhle adresář může obsahovat jen pár malých úprav. Tady je třeba layout tohoto blogu.
• /skin, /sites – Deklarace proměnných pro weby zobrazované tímto kódem.
• Někdo doporučuje shame.less jako odkladiště hotfixů, které se mají při nejbližší příležitosti zavést do finálního kódu. Můj přístup je komponent–centrický a tak i patřičně (TODO) označené hotfixy dávám do kódu komponent. Tam jednou za čas zahynout pod kopyty refaktorovacích koní. :)

Děláte to jinak? Pochlubte se jak. A hlavně proč! Zanechte komentář, zareagujte na sociálních sítích nebo napište vlastní blogpost.