BEM & Preprocesory (SASS)

BEM & Preprocesory (SASS)

Přednáška z Ostravského srazu frontendistů. 25.4.2014, Ostrava

69616d8fda5467f9c84fc141725fbf7c?s=128

Tomáš Musiol

April 26, 2014
Tweet

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