BEM & Preprocesory (SASS)

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

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