Metodiky BEM nabrala na popularitě v posledních dvou letech. Jedná se o sérii pravidel, které umožňují organizovat kaskádové styly, zlepšit udržitelnost projektu a vytvářet znovupoužitelné komponenty.

1. Metodika BEM
Martin Pešout / @martinpesout / martinpesout.cz

2. Co je to BEM?
CO + PROČ + JAK

3. Milníkem byl 2013
• 2013
• boom responsivního designu (RWD)
• RWD také znamená více složitějších CSS stylů

4. Milníkem byl 2013
• 2013
• boom responsivního designu (RWD)
• RWD také znamená více složitějších CSS stylů
• 2014
• boom optimalizací vytvořených responsivních webů
• responsivní web neznamená rychlý web na
mobilních připojeních

5. Vývoj webů v roce 2014
potřebuje metodologii
Skutečně potřebujeme dobrá pravidla
… raději než další frameworky

6. Proč vzniknul BEM?
• Způsob jak orgranizovat kód pro celý tým na
velkých projektech
• Znovupoužitelné komponenty
• Komponenty s dlouhou životností
• Snadno se osvojuje pro nové členy v týmu

7. Nejde o magii
BEM není těžké se naučit.
Na webu také na toto téma
najdeme celou řadu článků
a ukázek.

8. Nepoužívejte #ID selektory!

9. BEM = block + element
+ modifier

10. Block
• Oddělené komponenty
• button
• menu
• heading

11. Block
• Oddělené komponenty
• button
• menu
• heading
• Znovupoužitelné
• Nezávislé na dalších stylech

12. Element
• Vnitřní součást blocku
• button
• menu
• heading

13. Element
• Vnitřní součást blocku
• button - icon
• menu - item
• heading - logo

14. Element
• Vnitřní součást blocku
• button - icon
• menu - item
• heading - logo
• Nemá význam pokud by byl použit odděleně
• Některé bloky se nemusí nutně dělit na elementy

15. Modifier
• Definuje stav blocku nebo elementu
• button
• menu - item
• heading

16. Modifier
• Definuje stav blocku nebo elementu
• button - color
• menu - item - active state
• heading - level

17. BEM používá třídy jako
selectory pro bloky,
elementy a modifikátory

18. Konvence pro pojmenování
block
btn
menu
heading

19. Konvence pro pojmenování
block__element
btn__icon
menu__item
heading__logo

20. Konvence pro pojmenování
block__element––modifier
btn––large
btn__icon––arrow
menu––secondary
menu__item––active

22. Hlavička
<div class="header header--main">
<h1 class=“header__title">Brian &amp; Jessica</h1>
<div class=“header__description”>
Main information about our wedding
</div>
</div>

23. Obvyklé chyby
<div class="header header--main">
<h1>Brian &amp; Jessica</h1>
<p>
Main information about our wedding
</p>
</div>
• Nepoužívejte sdílené styly
• Nepoužívejte globální definice stylů (pouze
normalize.css je povolen)
• Žádné definice vně bloku

25. Tlačítko
<a href="#love-story" class="action-btn action-btn––
arrow-down”></a>

26. Banner
<div class=“banner">
<img src="/images/main-banner-large.jpg" alt="Bride
and groom” class="banner__img">
<div class="banner__title">Soon together</div>
<a href="#love-story" class="banner__btn action-btn
action-btn--arrow-down"></a>
</div>

27. Banner
<div class=“banner">
<img src="/images/main-banner-large.jpg" alt="Bride
and groom” class="banner__img">
<div class="banner__title">Soon together</div>
<a href="#love-story" class="banner__btn action-btn
action-btn--arrow-down"></a>
</div>
• Můžeme kombinovat více bloků dohromady

28. Nezávislé styly
• Můžeme změnit HTML syntax a vždy dosáhneme
stejného vzhledu
<ul class=“menu”>
<li class=“menu__item”>Home</li>
<li class=“menu__item menu__item––active”>Contact</li>
</ul>
<div class=“menu”>
<div class=“menu__item”>Home</div>
<div class=“menu__item menu__item––active”>Contact</div>
</div>

29. Tipy a triky
• Preprocessor vám může pomoci k lepší
organizaci stylů do více souborů. Každý blok
může mít vlastní soubor.
• Použijte prefix js- pro třídy nebo ID selectory
elementů, na které se odkazujete v
JavaScriptových souborech

30. Děkuju za
pozornost
Martin Pešout / @martinpesout / martinpesout.cz