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
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
300
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
110
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
200
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
160
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
250
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
150
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
230
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
130
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
110
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ソースを読むプロセスの例
sat
PRO
15
9.6k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Agile that works and the tools we love
rasmusluckow
331
21k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Practical Orchestrator
shlominoach
190
11k
Thoughts on Productivity
jonyablonski
70
4.9k
How to Ace a Technical Interview
jacobian
280
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.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