Jak na strukturování stylů projektu

Listopad 4, 2016

Projektové styly v site.less jsou pouze špička ledovce, přesto je třeba jim věnovat náležitou pozornost. Co může ze začátku vypadat jako několik řádku se velmi rychle utrhne a máme soubor s 1000 řádky, ve kterém je nemožné se orientovat.

První metodou, jak se ze stylů nezbláznit, je náležité strukturování. Neexistuje žádné pevné pravidlo, které by říkalo, jak má být soubor maximálně dlouhý, ale obecně je fajn si to držet do 200 řádků. Co tedy dělat, když jsou moje styly delší?

Rozdělit

Když se rozhodnu site.less rozdělit do menších celků, je nutné to udělat kompletně. Žádná polovičatá řešení! Ze site.less se pak stane jakýsi master, ve kterém jsou pouze deklarace proměnných a importy:

//
// PROJECT: Dino schools
// -------------------

// Variables
@menu-align: "center";
@icons-list: "book", "clock-o";

// Navbar extension to handle right panel
@import "components/navbar";
// Navbar colored links
@import "components/navbar-link-1";
@import "components/navbar-link-2";

// Custom component search form (in header)
@import "components/form-search";

Nikdy neimportujte soubory ve více úrovních. Vytváří to zátěž pro kompilaci a zároveň to znepřehledňuje zdrojové styly. No dobře, víme tedy, že styly musíme rozdělit. Vyvstává pár otázek. Jak? Na jaké celky? Jak je pojmenovat?

Každý importovaný styl musí tvořit nějaký logický celek. Není nic snazšího, než se inspirovat v tom, jak to děláme v solidpixels UI frameworku.

Názvy souborů a adresářů

Uvedu jeden příklad za všechny. Mám komponentu vyhledávacího formuláře, který je umístěn v hlavičce, jedno textové pole a tlačítko. Jak na to?

Jak uvádí CSS styleguide, komponenty je pojmenovávají sémanticky, ne podle umístějí. Fakt, že je v hlavičce je tedy jedno. Je to vyhledávací formulář, proto komponentu nazvu "form-search" a umístím ji do adresáře "components". Tím mám hotovo a můžu jít dál.

Proč zrovna "form-search", proč ne "search-form"? Názvy je dobré tvořit od obecného ke specifičtějšímu, stejně jako je podstata CSS, snáze se pak udržuje namespacing a obecně je výsledkem konzistentní kód. Styleguide se věnuje názvosloví více do hloubky, takže když budete tápat, měl by vám poskytnout odpovědi.

V další části se podíváme více do hloubky a budeme řešit proměnné, mixiny, breakpointy a další.