Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Maintainable CSS
Search
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
230
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
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
elyza
2
570
AIコーディングエージェント(Manus)
kondai24
0
210
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
180
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
3
1.3k
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
520
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
120
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
2.9k
gunshi
kazupon
1
110
クラウドに依存しないS3を使った開発術
simesaba80
0
150
AIエージェントの設計で注意するべきポイント6選
har1101
5
2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
890
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GitHub's CSS Performance
jonrohan
1032
470k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
580
AI: The stuff that nobody shows you
jnunemaker
PRO
1
8
Amusing Abliteration
ianozsvald
0
69
Visualization
eitanlees
150
16k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.3k
So, you think you're a good person
axbom
PRO
0
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
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?