BEM for Real Programmers

BEM for Real Programmers

Internal talk at Mollie

72635a06781143410d1ef4a25bf164ae?s=128

Mattijs Bliek

July 15, 2016
Tweet

Transcript

  1. None
  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
  5. None
  6. • Block • Element • Modifier Basics

  7. .cup (block) .cup--glass (modifier) .beer (block)

  8. None
  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.
  14. None
  15. None
  16. Te generiek

  17. None
  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
  21. None
  22. None
  23. None
  24. None
  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

  30. None
  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

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None