BEM & Preprocesory (SASS)

Transcript

1. Tomáš Musiol BEM & Preprocesory

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

3. • 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 Co je BEM?

4. Block (modul): .player

5. Elementy .player__header .player__cover .player__footer .player__info .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