Tomáš Musiol

BEM & Preprocesory

BBlock Element Modifier

E MCo 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

Co je BEM?

Block (modul): .player

Elementy.player__header

.player__cover

.player__footer

.player__info

.player__controls

.player__time

Elementy & Modifikátory

.player__control .player__control

.player__control—share

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

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

BEM a preprocesory (SASS)

.player__info{

&__author{ … } &__song{ … }

}

3.3+

BEM a preprocesory (SASS)

.player__info{

&__author{ … } &__song{ … }

}

.player__info{ … }

.player__info__author{ … }

.player__info__song{ … }

BEM a preprocesory (SASS)

.player__control{ @extend %control; }

.player__control--list{ … }

BEM a preprocesory (SASS)

.player__control{ @extend %control; }

.player__control--list{ … }

.player__control{ … }

.player__control--list{ … }

BEM a preprocesory (SASS)

.player__info{

.author{ … } .song{ … }

}

BEM a preprocesory (SASS)

.player__info{

.author{ … } .song{ … }

}

.player__info{ … }

.player__info .author{ … }

.player__info .song{ … }

Priorita selektorůBEM Zanořené selektory

BEM - modifikátor Zanořené selektory, modifikátor

Priorita selektorů

BEM ID

Struktura souborů a složek

Užitečné pluginy BEM - SublimeText

• All Autocomplete

• Syntax highlighting for Sass

• SublimeGit

• GitGutter

Děkuji za pozornostTomáš Musiol

@kozleek www.musiol.cz