Průvodce CSS preprocesory: jak vám vylepší pracovní postupy

Tohle je 3. část seriálu o CSS preprocesorech:

V článcích o CSS preprocesorech je obvykle argumetováno jejich technickými vlastnostmi. Ty jsme rozebrali v minulém díle seriálu.

Daleko zajímavější z pohledu odpovědi na otázku „Proč preprocesory používat?” je ovšem jejich vliv na efektivitu a kvalitu pracovních postupů.

Myslím si, že s CSS preprocesorem vyprodukujete v kratším čase kvalitnější kód než bez něj.

Kvalita kódu

Spravovatelnost
Metodiky organizace CSS kódu jako OOCSS, BEM, SMACSS mají bez preprocesorů tak poloviční dopad. Konkrétně BEM můžete krásně kombinovat se zanořováním v preprocesorech.
Organizace
Podívejte se do předchozího dílu na vlastnost @import. Díky ní můžete zapomenout na organizaci kódu orientovanou na stránky nebo na celostránkové breakpointy v media queries. Preprocesor vám kód umožní organizovat přes moduly, malé kousky kódu vztažené ke konkrétní komponentě uživatelského rozhraní jako je třeba navigace, článek nebo třeba karusel.

Rychlejší psaní kódu a změny v něm
Odvolávám se tady hlavně na mixiny, funkce nebo proměnné. Zkuste si třeba narychlo změnit jednu barvu v Bootstrapu, pokud jej používáte v CSS verzi namísto LESS a nemůžete použít generátor. Takhle vypadá peklo pro zlobivé kódery!
Využívání hotových knihoven
Díky preprocesorům se už i frontend designér může těšit výhodám hotových opensource knihoven nebo rovnou frameworků, které donedávna znali hlavně backend programátoři. Příkladem budiž frameworky jako Bootstrap, Foundation nebo knihovny CSS3 mixinů Bourbon, Compass nebo LESShat.
Vlastní knihovny
Každý český PHP programátor chce mít vlastní PHP framework. Teď už vlastní framework může mít i každý český CSS kóder! :-) S preprocesory je snadné a často i vhodné si pro potřeby opakujících se úkonů napsat vlastní sadu mixinů nebo rovnou framework typu Bootstapu.

Tolik ke vlivu CSS preprocesorů na pracovní postupy.

V příštím a posledním díle seriálu půjde do tuhého. Porovnáme si LESS, SASS a Stylus a zkusím vám doporučit, který začít používat.