$30 off During Our Annual Pro Sale. View Details »
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
44
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
65
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
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
220
これだけで丸わかり!LangChain v1.0 アップデートまとめ
os1ma
6
1.8k
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
380
Developing static sites with Ruby
okuramasafumi
0
270
React Native New Architecture 移行実践報告
taminif
1
150
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
2.1k
FluorTracer / RayTracingCamp11
kugimasa
0
230
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
390
AIコードレビューがチームの"文脈"を 読めるようになるまで
marutaku
0
350
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
26
22k
20251127_ぼっちのための懇親会対策会議
kokamoto01_metaps
2
430
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
58
6.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Visualization
eitanlees
150
16k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Facilitating Awesome Meetings
lara
57
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
Making Projects Easy
brettharned
120
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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