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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Juanda Zapata
March 30, 2016
Programming
0
83
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
72
Adapter Pattern
juanzuluaga
0
170
Elixir 101 - The Erlang VM
juanzuluaga
5
330
UI Fundamentals for Programmers
juanzuluaga
0
240
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
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
170
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
Basic Architectures
denyspoltorak
0
660
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
CSC307 Lecture 07
javiergs
PRO
0
550
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
CSC307 Lecture 04
javiergs
PRO
0
660
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
600
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
680
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
270
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
170
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
How to make the Groovebox
asonas
2
1.9k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
410
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Google's AI Overviews - The New Search
badams
0
900
The agentic SEO stack - context over prompts
schlessera
0
630
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?