BEM for Real Programmers

Internal talk at Mollie

Transcript

2. • Oorsprong • Basics • Wat fixt het? BEMBEMBEM
3. • Koppeling met html • Conflicten in selectors • Onbedoelde cascades CSS The Bad Parts
4. • OOCSS (Nicole Sullivan) • Yandex • Nicolas Gallager Russia to the rescue
6. • Block • Element • Modifier Basics
7. .cup (block) .cup--glass (modifier) .beer (block)
9. Maar wat fixt het nou?
10. Vijf problemen uitgelegd voor Real Programmers™
11. "Ik moet !important gebruiken om dit te overschrijven"
12. 1. Cyclomatic complexity
13. A quantitative measure of the number of linearly independent paths through a program's source code.
16. Te generiek
18. "Ik heb geen idee waarom deze style wordt toegepast."
19. 2. Composition over inheritance
20. Ook in CSS kun je beter selectors composen dan laten overerven
25. "Ik durf dit niet aan te passen want misschien gaan het ergens anders stuk."
26. 3. Open/Closed principle
27. Open for extension, closed for modification
28. Als je veelgebruikte styles aanpast gaat er bijna zeker weten ergens wat kaduuk
29. Gateway to hell
31. Op deze manier zijn de nieuwe styles opt-in en weet je zeker dat er niks breekt
32. "Deze selector wordt op twintig plekken gebruikt. Waar moet ik zoeken?"
33. 4. Single source of truth
34. Welke styles gelden nu voor .cookie? En als ik hier .cookie aan wil passen, waar moet ik dan zijn?
35. Hier weet ik exact welke styles applied worden, en waar ik ze kan vinden
36. Styles voor .card zitten altijd in card.css Conventie: module == file
37. "Deze selector wordt in wel 20 files gebruikt."
38. 5. Single responsibility principle
39. Deze button doet een heleboel en kan niet hergebruikt worden.
40. Nu is de button herbruikbaar en doet elke selector maar één ding
41. Tijd voor ACTIE