Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
BEM & Preprocesory (SASS)
Tomáš Musiol
April 26, 2014
Technology
2
340
BEM & Preprocesory (SASS)
Přednáška z Ostravského srazu frontendistů. 25.4.2014, Ostrava
Tomáš Musiol
April 26, 2014
Tweet
Share
More Decks by Tomáš Musiol
See All by Tomáš Musiol
kozleek
1
1.2k
Other Decks in Technology
See All in Technology
kraj
0
5.4k
tsugimot
0
120
sylk
0
170
nozomiito
0
160
apcom
1
260
becolomochi
0
160
sadayoshitada0919
1
350
kyonmm
1
2.4k
nkjzm
1
860
hisaichi5518
0
190
hikarut
1
100
kawaguti
0
120
Featured
See All Featured
maltzj
500
36k
chriscoyier
684
180k
searls
204
35k
mongodb
23
3.8k
smashingmag
283
47k
swwweet
206
6.8k
kneath
294
39k
cromwellryan
101
5.9k
colly
66
3k
brianwarren
83
4.7k
lynnandtonic
272
16k
roundedbygravity
241
21k
Transcript
Tomáš Musiol BEM & Preprocesory
B Block Element Modifier E M Co 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 pozornost Tomáš Musiol @kozleek www.musiol.cz