BEM for Real Programmers

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