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
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
130
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
Introdução a Service Mesh usando o Istio
aeciopires
0
220
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
210
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.8k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Adaptive Systems
keathley
44
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Code Reviewing Like a Champion
maltzj
526
40k
How GitHub (no longer) Works
holman
315
140k
How to Ace a Technical Interview
jacobian
280
24k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Navigating Team Friction
lara
190
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The Cult of Friendly URLs
andyhume
79
6.6k
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