„Modularizácia CSS kódu prichádza ako riešenie na nekvalitný a neprehľadný kód. Odvďačí sa znovupoužiteľnosťou, prehľadnosťou a radosťou z kódu.“
Som posadnutý organizovaním všetkého a tak som vždy delil svoj kód do pár základných súborov ako základné štýly, fonty, mixiny a jeden súbor pre zvyšnú časť kódu. Nový pohľad na vývoj však priniesli viaceré metodiky pre pomenovávanie CSS kódu. Zaoberal som sa všetkými hlavnými /BEM, OOCSS, SMACSS/ a najpríjemnejšia je pre mňa metodika BEM, ktorú vám predstavím.
BEM vytvorili vývojári z Yandexu, ktorým záležalo na kvalite ich kódu (nie je od veci si po prečítaní článku spraviť menší stalkering do zdrojáku Yandexu alebo oficiálneho BEM webu).
BEM sa skladá z troch hlavných častí, ktorými diktuje ako má váš kód vyzerať - blok, element a modifikátor. Blok označuje konkrétny modul, resp. komponentu, ktorá sa skladá z elementov. Elementy a bloky môžu nadobúdať rôzne stavy, ktoré označujeme ako modifikátor.
Zápis jednotlivých častí CSS kódu v BEM vyzerá nasledovne:
Blok: .blok
Element: .blok__element
Modifikátor: .blok__element—modifikator
Najlepšie je keď si to vysvetlíme na jednoduchom príklade:
[contentblock id=1]
Pozornejší si mohli všimnúť, že ako selektory používame CSS triedy namiesto ID. Zvyšujeme tým znovupoužiteľnosť a vyhýbame sa prehnanej špecifickosti kódu. ID prenecháme nášmu JavaScript kódu. Takisto by sme sa mali vyhnúť štýlovaniu konkrétnych HTML elementov a prenechať to na triedy ako selektory.
Návrh bloku je dobrý, ale návrh elementu a modifikátora mi nevyhovoval a pohľady vývojárov na správny zápis sa rôznia. Môj zápis elementu spočíva len v jedno-úrovňovom zanorovaní a u modifikátora preferujem skrátený zápis. Pre lepšie pochopenie uvádzam upravený predchádzajúci kód tak ako ho píšem ja:
[contentblock id=2]
Po tejto zmene si môžeme všimnúť jednoduchší a kratší zápis tried najmä v HTML kóde.
Okrem správneho pomenovávania selektorov je dôležité neponechať všetok kód v jednom CSS súbore, ale poctivo ho deliť do modulov. Znovu sa môžeme stretnúť s viacerými prístupmi, ja používam nasledujúcu štruktúru:
V zložke CSS nájdeme viaceré súbory ako ‘index’, ktorý slúži ako import place. ’base’ obsahuje základné štýly najnižšej úrovne pre celú app. ‘fonts’ načítava fonty, ‘grid’ obsahuje vlastný grid, alebo upravuje niektorý z použitých CSS gridov. Ďalej tu sú súbory s mixinami a premennými. Zložka lib zhromažďuje všetky použité knižnice a zložka modules obsahuje všetky moduly pomenované podľa BEM metodiky.
Ak sa vám celá modularizácia, ktorú sme si popísali zdá prehnaná, viem ako sa cítite. Obzvlášť ukladanie do samostatných CSS súborov sa môže zdať zdĺhavé a otravné. Opak je však pravdou. Modularizácia je tá najlepšia vec, ktorú môžete spraviť vášmu CSS kódu, všetkým kolegom ktorí budú čítať a upravovať váš kód a nakoniec aj vám samým. Skúste použiť tu popísané techniky pri vašom ďalšom väčšom projekte a som si istý že už v ? projektu budete spokojný!
