BEM – Block, Element, Modifier, wie und warum wir es einsetzen, kurz erklärt.

1. Einführung in BEM
@nicobruenjes, ZEIT ONLINE

2. Was ist BEM?

3. Eine einfache aber strikte
Namenskonvention für CSS

4. Unter anderem.

5. BEM?

6. Block, Element, Modifier

7. Block
• unabhängiger Teil des user interface
• wiederverwendbar in verschiedenen Kontexten
• kann weitere Blöcke oder Elemente enthalten

8. Block
• .logo
• .button
• .menue

9. Element
• Teil eines Blocks
• funktioniert nicht für sich alleinstehend

10. Element
• .logo__image
• .button__icon
• .menue__item

11. Modifier
• bildet den Zustand eines Blocks oder Elements ab
• oder eine bestimmte Eigenschaft
• können mehrfach an einem Block oder Element stehen

12. Modifier
• .logo--hidden
• .button--disabled
• .menue__item--folded

13. Und?

14. Tags werden nicht gestyled.
h3 { color: red; }

15. ID werden nicht gestyled.
#main { float: left; }

16. Es werden keine Selektorketten gebildet…
#main .elem h3 { border: none; }

17. .teaser { background: #fff; }
.teaser__infotext { font-size: .8em; }

18. …ausser bei Modifiern.

19. .teaser { color: #000; }
.teaser.teaser--highlighted { color: red; }

20. Was soll das bringen?

21. Namenskonvention

22. –Phil Karlton
„There are only two hard things in computer science: cache
invalidation and naming things.“

23. Jedes Element hat eine eigene
Klasse!

24. • maintainable Code: man weiss genau, welcher Code was macht
• Vertrauen in den Code
• Entitäten einzeln anpassbar
• lesbarer Code: Klassennamen enthalten schon Einordnung
• naming things etwas leichter geworden

25. Gleichbleibende Spezifität

26. ohne BEM (specifity war) mit BEM
Bugs?

27. • alle Entitäten gleichen Typs haben die gleiche Spezifität
• kein gegenseitiges Überschreiben
Nebenbei:
• Codequalität (Einhaltung der Konvention in diesem Fall) wird
meßbar und visuell darstellbar

28. Das sieht nach viel Code aus!
Gibt's da auch Hilfsmittel?

29. SASS: BEM Coding Style

30. .teaser
color: #000
&__infotext
color: #666
&--highlighted
color: #f00
.teaser {color: #000;}
.teaser__infotext {color:
#666;}
.teaser.teaser-highlighted
{color: #f00;}

31. @extend vorsichtig einsetzen!

32. Fragen?
@nicobruenjes

33. Just one thing…

34. Wir suchen Frontendler in Hamburg:
http://j.mp/ZonWebDev15