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
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
ふつうの技術スタックでアート作品を作ってみる
akira888
1
910
VS Code Update for GitHub Copilot
74th
2
660
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
230
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
880
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
150
型で語るカタ
irof
0
200
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building an army of robots
kneath
306
45k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
1
440
Side Projects
sachag
455
42k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
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