Jak udělat škálovatelný a udržitelný CSS

Pokud mám větší projekt, kde jsou nějaké moduly např. služby, fotogalerie, diskuze a některý modul v budoucnu změním nebo odstraním, např. budu chtít odstranit diskuzi, jak odstraním styly CSS pro diskuzi ? Samozřejmě musím dávat stylům nějaký prefix „diskuze__“, abych je dokázal snadno identifikovat. Ideálně bych je měl mít v samostatném zdrojovém souboru např. diskuze.scss a při odstranění diskuze z projektu tento soubor smazat ? Nebo ho nějakým způsobem vyřadím z procesu generování CSS ? Jakou složku zvolit pro zdrojové SCSS soubory ? Jakým způsobem oddělovat kritický CSS a styly komponent ? Pěkně je to popsané např. ve článku Scalable and Maintainable CSS architecture.

Styly je dobré rozdělovat do vrstev (layers). Takový obrácený trojúhelník. Jednotlivé vrstvy budou odpovídat účelu. Nejnižší první vrstva je nastavení (settings) – obsahuje fonty, definice barev. Druhávrstva budou nástroje (tools) – globálně používané mixiny a funkce. Tyto dvě vrstvy nebude tvořit žádný CSS. Třetí vrstva bude obecné (generic) – resety, normalizace, box-sizing, to bude první vrstva, která již bude generovat nějaký CSS. Čtvrtá vrstva se bude jmenovat elementy (elements) – stylování HTML elementů (H1, a atd.). Pátá vrstva bude objekty (objects) – selektory založené na jménu třídy (class-name). šestá vrstva komponenty (components) – specifické UI komponenty, sem bude patřit největší část stylů, mohou to být složeniny objektů a komponent. Sedmá vrstva pomůcky (utilities) – nejvyšší vrstva bude mít možnost přepsat cokoliv, budou zde pomocné třídy, skrývací vrstvy (hide).

Add Comment

Required fields are marked *. Your email address will not be published.


tři × = 6