Pište CSS jako znovupoužitelné komponenty

Má konvence pro psaní CSS s určitou logikou a bez opakování kódu, aneb proč nepouživat třeba BEM.

Každý, kdo se nějaký čas věnuje kódování webových stránek si hledá svou techniku a styl psaní kódu, případně začne používat některý více či méně rozšířený způsob jako například BEM a jim podobné. I já hledal a po dlouhé době jsem nalezl zřejmě nejvhodnější způsob, jakým psát CSS, který ušetří čas. Jaký by tedy měl být kód?

  • Čistý,
  • znovupoužitelný,
  • ne příliš dlouhý na psaní,
  • přehledný ke čtení,
  • logicky členěný,
  • lehce spravovatelný,
  • jednoduchý k odebrání.

Tyto požadavky se snaží splnit bohužel velmi rozšířený BEM, kde v podobě bloků, elementů a modifikátorů píšeme kolikrát ultra dlouhé a nepřehledné kódy, které leckdy samotné ani nedávají smysl. Co tím přesně myslím uvedu na příkladu:

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

Zapomeňme na nějaké podmínky, které jsou pro BEM dané (pokud jsou :-)), co je na tomto kousku špatně?

  • Opravdu můžeme použít třídu site-search--full pro každý element, jak je z kódu patrné?
  • Proč bych měl všechno psát s prefixem, mám se upsat? Kde je princip DRY?
  • Po chvíli koukání se lehce přehlédne, kde je - (pomlčka) a kde _ (podtržítko). Pro jistotu přidáme někdy ještě pomlčky dvě :-) 
  • Kolikrát mě to nutí přemýšlet, co je blok a co je element.

Takový způsob jsem hned zavrhl, protože takhle CSS psát prostě nejde a začal vymýšlet techniku, která mě bude bavit, bude jednoduchá a rychle se v ní vyznám. Zůstal jsem u představy použití objektů s tím, že objekty nazývám komponenty, a co je to vlastně ta komponenta? Jde o element, který mohu v dokumentovém modelu (DOM) vzít a přesunout na libovolné místo, vypadat bude pořád stejně. Jak na to a co budeme potřebovat:

  • označit komponenty (na první pohled musí být patrné, že jde o komponentu),
  • označit modifikátory komponent.

Způsob finálního zápisu je už na každém a pro inspiraci předkládám ten svůj:

  • komponenta má prefixovanou třídu c-site-search,
  • modifikátor začíná pomlčkou a je přidružen přímo komponentě (vyjma globálních modifikátorů),
    například -full

K psaní CSS používám z důvodu rychlosti kompilace (a svého workflow pomocí Gulp) preprocesor Less a zápis by pak vypadal velmi jednoduše. Do souboru site-search.less ve složce components bych psal tyto řádky:

.c-site-search {
    background: yellow;
    border: 1px solid orange;
    width: 50%;
    
    .field { }
    
    &.-full {
        width: auto;
    }
}

I tak jednoduše lze psát CSS! :-) A jaké to má výhody?

  • Na první pohled v HTML (i v CSS) vidím, jaký element mohu vzít a přesunout na jiné místo.
  • Ke komponentě jsou napevno přidružené její modifikátory, můžu je tedy používat jen s touto komponentou.
  • Pokud se v HTML nevyskytuje žádná třída c-site-search, mohu soubor patřící komponentě odstranit.
  • V JavaScriptu (kde ve svém frameworku opět používám formu komponent) bych si měl vystačit pouze s modifikátory.
  • Vidím hned, co je a co není modifikátor.
  • Neopakuji se při psaní.

A jak Vy píšete své CSS soubory, a hlavně - vyznáte se v nich?

Komentáře