Rýchle zhrnutie: Prečo je dobré mať jednotné pravidlá písania kódu naprieč celým frontend oddelením? Aké výhody z toho plynú? Zaviedli sme u nás BEM metodiku, vďaka ktorej vieme byť pri práci efektívnejší.
Existuje veľa metodológií písania CSS štýlov. Keďže je možností veľa, môžete si vyberať a skúšať, ktorá by sa najlepšie hodila nielen pre vás osobne, ale napríklad aj pre celý tím frontend vývojárov. U nás v Bluewebe sme po intenzívnom skúmaní vybrali BEM. Táto metodológia bola najbližšia nášmu predošlému fungovaniu, teda sme si na „novinku” rýchlo zvykli, zároveň nám poskytuje mnoho výhod, ktoré sme dovtedy nevedeli/nemohli využiť.
Dôvod, prečo sme si zvolili BEM
Jednotná metodológia poskytuje mnoho výhod. Vymedzuje totiž „pravidlá“, ako má skupina ľudí, ktorí pracujú v tíme, písať kód tak, aby bol jasný pre kohokoľvek, kto si projekt otvorí. Takto eliminujeme veľkú diverzitu – napríklad, keď jeden vývojár preferuje písať názvy tried s pomlčkou a iný zasa s podčiarkovníkom. Ak využijete BEM zaručí vám to, že všetci frontend vývojári „píšu rovnakým jazykom“. Pomerne dlho sme riešili problém, keď mal každý svoj vlastný spôsob písania CSS. Tento mix CSS štýlov sme potrebovali zjednotiť, aby sme zvýšili efektivitu najmä v prípadoch, keď na jednom projekte pracovali viacerí developeri. Jasnou odpoveďou a riešením bolo pre nás zavedenie BEM metodiky.
Stručne o BEM
BEM metodika má striktné pravidlá. Názov BEM pochádza z iniciálov základných prvkov, na ktorých celá táto metodika stojí, a to Block, Element a Modifier.
Block – predstavuje samostatnú entitu, prvok – napríklad pätička
Element – sú to potomkovia bloku, napríklad za element bloku pätičky môžeme považovať tlačidlo, ktoré sa v nej nachádza. Elementy sa oddeľujú od bloku dvoma podčiarkovníkmi.
Modifier – je to modifikácia bloku alebo elementu, zmena stavu od toho základného – napríklad tlačidlo môže mať modifikátory typu: chyba, úspech, deaktivovaný (error, success, disabled) atď. Modifikátory sa oddeľujú dvoma pomlčkami.
Príklad:
.blok__element—modifikator = .footer__contactButton—disabled
Výhody používania BEM
- Čítateľnejší kód – tým, že všetci developeri používajú rovnaký „jazyk“, nedochádza k miešaniu CSS štýlov. Výsledkom je, že kód je čistejší a ľahšie udržiavateľný.
- Modularita – rozloženie komponentov do jednoduchších menších častí nám pomáha písať manažovateľnejší kód, nezávislý od ostatných prvkov.
- Znovupoužiteľnosť – keďže sú jednotlivé prvky nezávislé, je veľmi jednoduché ich použiť v ďalších projektoch.
- Štruktúra – udržuje štruktúru projektu prehľadnú.
- Efektivita – vďaka striktným pravidlám eliminuje čas, kedy by vývojár hľadal príslušné štýly, ktoré potrebuje editovať a takisto aj riziko duplikovania kódu a zbytočného prepisovania.
- Rozsiahla komunita – v prípade, že do firmy príde nový vývojár, stačí mu vysvetliť základné princípy, vďaka čomu nemá problém s rýchlou adaptáciou. Naviac sa nemusí dopytovať seniorov, pretože má jasne stanovené pravidlá. A v neposlednom rade je BEM populárny aj vo svete, takže vie na internete nájsť množstvo odpovedí, ako s ním pracovať. Pokiaľ sa tím rozšíri aj o skúseného developera, je veľká pravdepodobnosť, že s BEM je už oboznámený a vie s ním bez problémov pracovať.
BEM v kombinácií so SASS preprocesorom, ktorý v Bluewebe používame, tvorí efektívny tandem zaručujúci čitateľný kód, ktorému bude rozumieť každý vývojár – a ak nie, tak sa to vie rýchlo naučiť.
Ako to prebiehalo u nás?
Juniorní vývojári v našom tíme túto metodiku veľmi rýchlo pochopili a začali ju efektívne využívať v priebehu pár dní. To nás presvedčilo, že BEM je správna cesta. Celkovo sa znížila miera prepisovania kódu a vzájomných konflikov v už napísanom kóde. Zvýšila sa naša efektivita a badateľný je rozdiel prehľadnosti a čitateľnosti celého kódu naprieč našimi projektami. BEM metodika nám do písania CSS štýlov a prehľadnosti našich projektov priniesla presne to, čo sme si od jej zavedenia sľubovali.
https://www.smashingmagazine.com/2018/06/bem-for-beginners/
Maťa je náš frontend tech lead. Stará sa o to, aby všetko na FE fungovalo ako dobre namazaný stroj.
