BEM & Preprocesory (SASS)

Transcript

1. 1.

   Tomáš Musiol BEM & Preprocesory

2. 2.

   B Block Element Modifier E M Co je BEM?

3. 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. 4.

   Block (modul): .player

5. 5.

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

6. 6.

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

7. 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. 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. 9.

   BEM a preprocesory (SASS) .player__info{ ! &__author{ … } &__song{

   … } ! } 3.3+
10. 10.

    BEM a preprocesory (SASS) .player__info{ ! &__author{ … } &__song{

    … } ! } .player__info{ … } .player__info__author{ … } .player__info__song{ … }
11. 11.

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

    … }
12. 12.

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

    … } .player__control{ … } .player__control--list{ … }
13. 13.

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

    … } ! }
14. 14.

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

    … } ! } .player__info{ … } .player__info .author{ … } .player__info .song{ … }
15. 15.

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

    modifikátor
16. 16.

    Priorita selektorů BEM ID

17. 17.

    Struktura souborů a složek

18. 18.

    Užitečné pluginy BEM - SublimeText • All Autocomplete • Syntax

    highlighting for Sass • SublimeGit • GitGutter
19. 19.

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