Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BEM for Real Programmers

BEM for Real Programmers

Internal talk at Mollie

Mattijs Bliek

July 15, 2016
Tweet

More Decks by Mattijs Bliek

Other Decks in Programming

Transcript

  1. • Oorsprong
    • Basics
    • Wat fixt het?
    BEMBEMBEM

    View full-size slide

  2. • Koppeling met html
    • Conflicten in selectors
    • Onbedoelde cascades
    CSS
    The Bad Parts

    View full-size slide

  3. • OOCSS (Nicole Sullivan)
    • Yandex
    • Nicolas Gallager
    Russia to the
    rescue

    View full-size slide

  4. • Block
    • Element
    • Modifier
    Basics

    View full-size slide

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

    View full-size slide

  6. Maar wat
    fixt het nou?

    View full-size slide

  7. Vijf problemen
    uitgelegd voor
    Real Programmers™

    View full-size slide

  8. "Ik moet !important
    gebruiken om dit te
    overschrijven"

    View full-size slide

  9. 1.
    Cyclomatic
    complexity

    View full-size slide

  10. A quantitative measure
    of the number of linearly
    independent paths
    through a program's
    source code.

    View full-size slide

  11. "Ik heb geen idee
    waarom deze style
    wordt toegepast."

    View full-size slide

  12. 2.
    Composition
    over inheritance

    View full-size slide

  13. Ook in CSS kun je
    beter selectors
    composen dan laten
    overerven

    View full-size slide

  14. "Ik durf dit niet aan te
    passen want misschien
    gaan het ergens
    anders stuk."

    View full-size slide

  15. 3.
    Open/Closed
    principle

    View full-size slide

  16. Open for extension,
    closed for
    modification

    View full-size slide

  17. Als je veelgebruikte
    styles aanpast gaat er
    bijna zeker weten
    ergens wat kaduuk

    View full-size slide

  18. Gateway to hell

    View full-size slide

  19. Op deze manier zijn de
    nieuwe styles opt-in
    en weet je zeker dat er
    niks breekt

    View full-size slide

  20. "Deze selector wordt
    op twintig plekken
    gebruikt.
    Waar moet ik zoeken?"

    View full-size slide

  21. 4.
    Single source
    of truth

    View full-size slide

  22. Welke styles gelden nu voor .cookie?
    En als ik hier .cookie aan wil passen,
    waar moet ik dan zijn?

    View full-size slide

  23. Hier weet ik exact welke styles
    applied worden, en waar ik ze
    kan vinden

    View full-size slide

  24. Styles voor .card
    zitten altijd in card.css
    Conventie:
    module == file

    View full-size slide

  25. "Deze selector wordt in
    wel 20 files gebruikt."

    View full-size slide

  26. 5.
    Single
    responsibility
    principle

    View full-size slide

  27. Deze button doet een heleboel en
    kan niet hergebruikt worden.

    View full-size slide

  28. Nu is de button herbruikbaar en
    doet elke selector maar één ding

    View full-size slide

  29. Tijd voor
    ACTIE

    View full-size slide