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
Maintainable CSS
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Juanda Zapata
March 30, 2016
Programming
0
84
Maintainable CSS
Introduction to BEM
Juanda Zapata
March 30, 2016
Tweet
Share
More Decks by Juanda Zapata
See All by Juanda Zapata
Principles of Visual Design
juanzuluaga
0
74
Adapter Pattern
juanzuluaga
0
170
Elixir 101 - The Erlang VM
juanzuluaga
5
330
UI Fundamentals for Programmers
juanzuluaga
0
260
UI fundamentals for programmers
juanzuluaga
0
390
Programming in paradise
juanzuluaga
1
140
Intro to Ruby
juanzuluaga
1
700
Other Decks in Programming
See All in Programming
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
450
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
270
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
200
Codex の「自走力」を高める
yorifuji
0
1.3k
コードレビューをしない選択 #でぃーぷらすトウキョウ
kajitack
3
1.2k
Rethinking API Platform Filters
vinceamstoutz
0
4k
Tamach-sre-3_ANDPAD-shimaison93
mane12yurks38
0
200
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
tak848
0
290
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
320
「効かない!」依存性注入(DI)を活用したAPI Platformのエラーハンドリング奮闘記
mkmk884
0
280
安いハードウェアでVulkan
fadis
1
840
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
ikezoemakoto
0
310
Featured
See All Featured
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
190
Crafting Experiences
bethany
1
97
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
87
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
420
Marketing to machines
jonoalderson
1
5.1k
Deep Space Network (abreviated)
tonyrice
0
97
Writing Fast Ruby
sferik
630
63k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
200
How to Talk to Developers About Accessibility
jct
2
160
Faster Mobile Websites
deanohume
310
31k
Transcript
Maintainable CSS with BEM
a set of conventions
not a library
not a framework
set of conventions
enforce them in code review
not a silver bullet
writing maintainable CSS is HARD
add everything to app.sass
app.sass => 1000 LOC
too hard to find a selector
too easy to overwrite a style
not maintainable
BEM
Block Element Modifier
None
None
None
None
None
None
not easily overwritten by accident
None
ugh that's a lot of typing
None
folder structure
again, not enforced by any script or framework
better to have several small focused files
None
None
use the power of SASS
variables
we can change the whole L&F of an app just
by modifying one file
None
alternatives
SMACSS https://smacss.com/
Scalable Modular Architecture for CSS
Used by TWTBS
Selectors tend to be deeply nested
Hard to customize
It's ok to mix BEM and SMACSS
CSSModules http://glenmaddern.com/articles/css-modules
Gaining a lot of steam in the REACT community
It's a step forward over BEM without global namespaces
thanks!
questions?