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
390
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.4k
Other Decks in Technology
See All in Technology
Claude Codeは仕様駆動の夢を見ない
gotalab555
2
320
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
330
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
390
リリース2ヶ月で収益化した話
kent_code3
1
180
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
180
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
0
200
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
210
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
How to Ace a Technical Interview
jacobian
278
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
The Language of Interfaces
destraynor
158
25k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
It's Worth the Effort
3n
185
28k
Visualization
eitanlees
146
16k
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