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
35
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
52
A Front-end Designer's Guide to the Galaxy
mattijsbliek
0
130
Digital Design for Humans
mattijsbliek
1
130
Designing in the Future
mattijsbliek
1
130
How to automate (nearly) anything
mattijsbliek
0
130
Other Decks in Programming
See All in Programming
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
370
見た目から始める生産性向上
ikumatadokoro
7
800
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Java 22 Overview
kishida
1
180
新宿ダンジョンを可視化してみた
satoshi7190
2
230
VS Code をプロダクトにどう取り込むか
onomax
1
350
エンターテイメント業界で利用されるAWS
demuyan
0
210
Fragment Composition of GraphQL
quramy
2
220
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
700
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
200
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
Featured
See All Featured
Writing Fast Ruby
sferik
621
60k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Faster Mobile Websites
deanohume
299
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Cult of Friendly URLs
andyhume
74
5.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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