Pri každom vývoji webovej aplikácie, na ktorej pracuje tím alebo sa vystriedá niekoľko developerov, či už ide o udržiavané aplikácie alebo o nové projekty, každý z týchto developerov v nej zanechá svoj štýl písania HTML a CSS kódu. Pri malých weboch nie je udržiavanie kódu až tak veľký problém. Avšak, ak sa pozrieme na väčšie aplikácie je organizácia, ujednotenie štýlu a optimalizácia HTML a CSS kódov veľmi dôležitá.
Existuje mnoho menných konvencií, ktoré sa pokúšajú zaviesť pravidlá pre programátorov pri písaní kódu akejkoľvek aplikácie. Bez ohľadu na to, akú metodológiu si pre svoj projekt zvolíte, budete počas celej jeho tvorby a aj pri jeho udržiavaní využívať výhody štruktúrovanejších CSS a UI. Niektoré konvencie sú flexibilnejšie iné veľmi prísne, jedny sú ľahšie pochopiteľné a prispôsobiteľné iné sú zložité.
Aká je ale moja odpoveď na to, ktorú z nich si vybrať? BEM.
Block Element Modifier metodológia (v skratke používaná ako BEM) je veľmi populárna, menná konvencia, používaná v HTML a CSS. Hlavným účelom tejto konvencie je vytvoriť také CSS triedy, ktoré sú jednoznačné a pre developera čo najinformatívnejšie. Ten tak dokáže lepšie a rýchlejšie pochopiť vzťah medzi HTML a CSS v danom projekte (častokrát už na prvý pohľad).
Pre porovnanie CSS trieda, ktorá je napísaná rôznymi spôsobmi:
.menuitemvisible .menu-item-visible .menuItemVisible .item
Pri prvom nie je možné ihneď definovať, kde končí a začína ďalšie slovo. Pri ďalších dvoch sú slová čitateľne oddelené pomlčkami. Avšak ani jedna z nich nám neponúka detailnejšiu informáciu o tom, akú položku táto definícia predstavuje. Pri poslednej z nich je možné takúto triedu použiť omylom znova a teda je nejednoznačne definovaná.
Ako to ale vyzerá v BEM?
.menu__item--visible
Blok je najvyššou abstrakciou nového komponentu, napríklad menu: .menu {}. Tento blok by mal byť považovaný za rodiča. Jeho “deti”, alebo prvky, sú umiestnené za názvom bloku a sú oddelené dvoma podčiarkovníkmi .menu__item {}. A nakoniec modifikátory, manipulujú s blokom alebo elementom tak, aby sme mohli danú triedu témy alebo štýlu zmeniť bez toho, aby spôsobili zmeny na úplne nesúvisiacom module. To sa robí pridaním dvoch pomlčiek k názvu bloku alebo elementu, teda .menu––mobile {} alebo .menu__item––visible {}.
Naša definícia zápisu tejto CSS triedy nám teda poskytuje už na prvý pohľad informáciu o tom, že pracujeme s položkou v bloku “menu” ktorá sa nazýva “item” a tá má svoj modifikátor “visible”.
Základné pravidlá písania v BEM v bodoch:
- Triedy sú písané malými latinskými písmenami. Môžu obsahovať pomlčku (oddelenie slov) alebo číslicu.
- Názvy bloku definujú namespace pre jeho elementy a modifikátory
- Názvy elementov sú od bloku oddelené dvoma podčiarkovníkmi __
- Modifikátory sú od bloku alebo elementu oddelené dvoma pomlčkami ––
Jednoduchý príklad:
Ak tento kód napísal iný vývojár a my nepoznáme projekt, mali by sme mať stále dobrú predstavu o tom, ktoré triedy sú za čo zodpovedné a ako sú na sebe závislé. Vývojári potom môžu vytvoriť svoje vlastné komponenty a modifikovať existujúce bloky alebo elementy podľa seba bez toho, aby zmenili akýkoľvek iný element na webstránke, vďaka jednoznačnosti tried.
Reálny, zložitejší príklad (aj keď možno nie, pretože BEM!) jquery plugin photoSwipe:
