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
40
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
62
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
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
アセットのコンパイルについて
ojun9
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
19
11k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Ruby Parser progress report 2025
yui_knk
1
430
Swift Updates - Learn Languages 2025
koher
2
470
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
Testing Trophyは叫ばない
toms74209200
0
850
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How STYLIGHT went responsive
nonsquared
100
5.8k
Documentation Writing (for coders)
carmenintech
74
5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Code Review Best Practice
trishagee
70
19k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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