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
Juanda Zapata
March 30, 2016
Programming
0
82
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
210
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
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Devoxx BE - Local Development in the AI Era
kdubois
0
140
理論と実務のギャップを超える
eycjur
0
180
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Developer Joy - The New Paradigm
hollycummins
1
370
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
440
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
モテるデスク環境
mozumasu
3
1.3k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.3k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.8k
Go言語はstack overflowの夢を見るか?
logica0419
0
600
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Automating Front-end Workflow
addyosmani
1371
200k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
RailsConf 2023
tenderlove
30
1.3k
How GitHub (no longer) Works
holman
315
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Context Engineering - Making Every Token Count
addyosmani
8
300
Code Review Best Practice
trishagee
72
19k
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?