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
36
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
54
A Front-end Designer's Guide to the Galaxy
mattijsbliek
0
130
Digital Design for Humans
mattijsbliek
1
140
Designing in the Future
mattijsbliek
1
130
How to automate (nearly) anything
mattijsbliek
0
130
Other Decks in Programming
See All in Programming
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Introduction to GitOps
hwchiu
0
110
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
【Go言語】ジェネリクス
tomo1227
0
170
Featured
See All Featured
Happy Clients
brianwarren
94
6.5k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
The Mythical Team-Month
searls
217
43k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Why Our Code Smells
bkeepers
PRO
332
56k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Making Projects Easy
brettharned
111
5.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
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