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
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.2k
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
Deep Dive into Kotlin Flow
jmatsu
1
340
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
print("Hello, World")
eddie
2
530
testingを眺める
matumoto
1
140
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Rails Girls Zürich Keynote
gr2m
95
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Why Our Code Smells
bkeepers
PRO
339
57k
Statistics for Hackers
jakevdp
799
220k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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