Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BEM & Preprocesory (SASS)
Search
Tomáš Musiol
April 26, 2014
Technology
2
370
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
CEZET Map - Představení projektu
kozleek
1
1.3k
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.5k
認知症フレンドリーテックとスタックチャン
naokiuc
0
380
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
620
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
7
2.4k
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
130
M5と自作基板をくっつけてみた〜M5 Japan Tour 2024 Spring 福冈 (Fukuoka|福岡)〜
keropiyo
1
250
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
6
3.9k
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
120
本当のガバクラ基礎
toru_kubota
0
230
データ基盤を支える技術
chanyou0311
1
130
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
170
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
130
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
66
14k
A designer walks into a library…
pauljervisheath
201
23k
Writing Fast Ruby
sferik
622
60k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Code Review Best Practice
trishagee
56
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
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