BEM & Preprocesory Block, Element, Modifier

1. BEM & Preprocesory
Tomáš Musiol

2. Co je BEM?
B
Block Element Modifier
E M

3. Co je BEM?
• Konvence pro pojmenování komponent
• Nepoužívá ID, popisuje element výhradně pomocí Class
• Střední a velké projekty (Původně Yandex IS)
• Odděluje: Block / Element / Modifikátor

4. Block (modul): .player

5. Elementy
.player__header
.player__info
.player__cover
.player__footer
.player__controls
.player__time

6. Elementy & Modifikátory
.player__control .player__control
.player__control—share

7. Výhody
• Modulárnost CSS
• Znovupoužitelnost kódu
• Přehled v prioritě selektorů (ID vs. Class vs. Zanoření)
• Snadnější orientace v GIT repositáři
• Snadno pochopitelné pro všechny členy týmu

8. Nevýhody
• Mohou vznikat dlouhé názvy tříd
• Zbytečně složité na malých projektech
• Nepořádek v souborech (HTML, CSS), když se
nedodržují pravidla

9. BEM a preprocesory (SASS)
.player__info{
&__author{ … }
&__song{ … }
}
3.3+

10. BEM a preprocesory (SASS)
.player__info{
&__author{ … }
&__song{ … }
}
.player__info{ … }
.player__info__author{ … }
.player__info__song{ … }

11. BEM a preprocesory (SASS)
.player__control{
@extend %control;
}
.player__control--list{ … }

12. BEM a preprocesory (SASS)
.player__control{
@extend %control;
}
.player__control--list{ … }
.player__control{ … }
.player__control--list{ … }

13. BEM a preprocesory (SASS)
.player__info{
.author{ … }
.song{ … }
}

14. BEM a preprocesory (SASS)
.player__info{
.author{ … }
.song{ … }
}
.player__info{ … }
.player__info .author{ … }
.player__info .song{ … }

15. Priorita selektorů
BEM Zanořené selektory
BEM - modifikátor Zanořené selektory, modifikátor

16. Priorita selektorů
BEM ID

17. Struktura souborů a složek

18. Užitečné pluginy BEM - SublimeText
• All Autocomplete
• Syntax highlighting for Sass
• SublimeGit
• GitGutter

19. Děkuji za pozornost
Tomáš Musiol
@kozleek www.musiol.cz