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

  1. Co a jak?
  2. Technické vlastnosti
  3. Jak vám vylepší pracovní postupy?
  4. Který vybrat?

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.

Rychlost vývoje

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

Komentáře