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. 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?
  2. 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
  3. 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
  4. 10.

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

    … } ! } .player__info{ … } .player__info__author{ … } .player__info__song{ … }
  5. 12.

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

    … } .player__control{ … } .player__control--list{ … }
  6. 14.

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

    … } ! } .player__info{ … } .player__info .author{ … } .player__info .song{ … }
  7. 18.

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

    highlighting for Sass • SublimeGit • GitGutter