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 for Real Programmers
Search
Mattijs Bliek
July 15, 2016
Programming
0
39
BEM for Real Programmers
Internal talk at Mollie
Mattijs Bliek
July 15, 2016
Tweet
Share
More Decks by Mattijs Bliek
See All by Mattijs Bliek
Vim for newbies
mattijsbliek
0
61
A Front-end Designer's Guide to the Galaxy
mattijsbliek
0
130
Digital Design for Humans
mattijsbliek
1
150
Designing in the Future
mattijsbliek
1
140
How to automate (nearly) anything
mattijsbliek
0
140
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
220
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
770
VS Code Update for GitHub Copilot
74th
1
340
Benchmark
sysong
0
260
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
320
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
340
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
生成AIで日々のエラー調査を進めたい
yuyaabo
0
640
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
880
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
The Invisible Side of Design
smashingmag
299
51k
Bash Introduction
62gerente
614
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Gamification - CAS2011
davidbonilla
81
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1031
460k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Music & Morning Musume
bryan
46
6.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Transcript
None
• Oorsprong • Basics • Wat fixt het? BEMBEMBEM
• Koppeling met html • Conflicten in selectors • Onbedoelde
cascades CSS The Bad Parts
• OOCSS (Nicole Sullivan) • Yandex • Nicolas Gallager Russia
to the rescue
None
• Block • Element • Modifier Basics
.cup (block) .cup--glass (modifier) .beer (block)
None
Maar wat fixt het nou?
Vijf problemen uitgelegd voor Real Programmers™
"Ik moet !important gebruiken om dit te overschrijven"
1. Cyclomatic complexity
A quantitative measure of the number of linearly independent paths
through a program's source code.
None
None
Te generiek
None
"Ik heb geen idee waarom deze style wordt toegepast."
2. Composition over inheritance
Ook in CSS kun je beter selectors composen dan laten
overerven
None
None
None
None
"Ik durf dit niet aan te passen want misschien gaan
het ergens anders stuk."
3. Open/Closed principle
Open for extension, closed for modification
Als je veelgebruikte styles aanpast gaat er bijna zeker weten
ergens wat kaduuk
Gateway to hell
None
Op deze manier zijn de nieuwe styles opt-in en weet
je zeker dat er niks breekt
"Deze selector wordt op twintig plekken gebruikt. Waar moet ik
zoeken?"
4. Single source of truth
Welke styles gelden nu voor .cookie? En als ik hier
.cookie aan wil passen, waar moet ik dan zijn?
Hier weet ik exact welke styles applied worden, en waar
ik ze kan vinden
Styles voor .card zitten altijd in card.css Conventie: module ==
file
"Deze selector wordt in wel 20 files gebruikt."
5. Single responsibility principle
Deze button doet een heleboel en kan niet hergebruikt worden.
Nu is de button herbruikbaar en doet elke selector maar
één ding
Tijd voor ACTIE
None
None
None
None
None
None
None
None
None