Einführung in BEM
@nicobruenjes, ZEIT ONLINE
Was ist BEM?
Eine einfache aber strikte
Namenskonvention für CSS
Unter anderem.
BEM?
Block, Element, Modifier
Block
• unabhängiger Teil des user interface
• wiederverwendbar in verschiedenen Kontexten
• kann weitere Blöcke oder Elem...
Block
• .logo
• .button
• .menue
Element
• Teil eines Blocks
• funktioniert nicht für sich alleinstehend
Element
• .logo__image
• .button__icon
• .menue__item
Modifier
• bildet den Zustand eines Blocks oder Elements ab
• oder eine bestimmte Eigenschaft
• können mehrfach an einem Bl...
Modifier
• .logo--hidden
• .button--disabled
• .menue__item--folded
Und?
Tags werden nicht gestyled.
h3 { color: red; }
ID werden nicht gestyled.
#main { float: left; }
Es werden keine Selektorketten gebildet…
#main .elem h3 { border: none; }
.teaser { background: #fff; }

.teaser__infotext { font-size: .8em; }
…ausser bei Modifiern.
.teaser { color: #000; }

.teaser.teaser--highlighted { color: red; }
Was soll das bringen?
Namenskonvention
–Phil Karlton
„There are only two hard things in computer science: cache
invalidation and naming things.“
Jedes Element hat eine eigene
Klasse!
• maintainable Code: man weiss genau, welcher Code was macht
• Vertrauen in den Code
• Entitäten einzeln anpassbar
• lesba...
Gleichbleibende Spezifität
ohne BEM (specifity war) mit BEM
Bugs?
• alle Entitäten gleichen Typs haben die gleiche Spezifität
• kein gegenseitiges Überschreiben





Nebenbei:
• Codequalitä...
Das sieht nach viel Code aus!
Gibt's da auch Hilfsmittel?
SASS: BEM Coding Style
.teaser
color: #000
&__infotext
color: #666
&--highlighted
color: #f00
.teaser {color: #000;}
.teaser__infotext {color:
#6...
@extend vorsichtig einsetzen!
Fragen?
@nicobruenjes
Just one thing…
Wir suchen Frontendler in Hamburg:
http://j.mp/ZonWebDev15
Nächste SlideShare
Wird geladen in …5
×

Einführung in BEM

3.243 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.243
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.221
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Einführung in BEM

  1. 1. Einführung in BEM @nicobruenjes, ZEIT ONLINE
  2. 2. Was ist BEM?
  3. 3. Eine einfache aber strikte Namenskonvention für CSS
  4. 4. Unter anderem.
  5. 5. BEM?
  6. 6. Block, Element, Modifier
  7. 7. Block • unabhängiger Teil des user interface • wiederverwendbar in verschiedenen Kontexten • kann weitere Blöcke oder Elemente enthalten
  8. 8. Block • .logo • .button • .menue
  9. 9. Element • Teil eines Blocks • funktioniert nicht für sich alleinstehend
  10. 10. Element • .logo__image • .button__icon • .menue__item
  11. 11. Modifier • bildet den Zustand eines Blocks oder Elements ab • oder eine bestimmte Eigenschaft • können mehrfach an einem Block oder Element stehen
  12. 12. Modifier • .logo--hidden • .button--disabled • .menue__item--folded
  13. 13. Und?
  14. 14. Tags werden nicht gestyled. h3 { color: red; }
  15. 15. ID werden nicht gestyled. #main { float: left; }
  16. 16. Es werden keine Selektorketten gebildet… #main .elem h3 { border: none; }
  17. 17. .teaser { background: #fff; }
 .teaser__infotext { font-size: .8em; }
  18. 18. …ausser bei Modifiern.
  19. 19. .teaser { color: #000; }
 .teaser.teaser--highlighted { color: red; }
  20. 20. Was soll das bringen?
  21. 21. Namenskonvention
  22. 22. –Phil Karlton „There are only two hard things in computer science: cache invalidation and naming things.“
  23. 23. Jedes Element hat eine eigene Klasse!
  24. 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. 25. Gleichbleibende Spezifität
  26. 26. ohne BEM (specifity war) mit BEM Bugs?
  27. 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. 28. Das sieht nach viel Code aus! Gibt's da auch Hilfsmittel?
  29. 29. SASS: BEM Coding Style
  30. 30. .teaser color: #000 &__infotext color: #666 &--highlighted color: #f00 .teaser {color: #000;} .teaser__infotext {color: #666;} .teaser.teaser-highlighted {color: #f00;}
  31. 31. @extend vorsichtig einsetzen!
  32. 32. Fragen? @nicobruenjes
  33. 33. Just one thing…
  34. 34. Wir suchen Frontendler in Hamburg: http://j.mp/ZonWebDev15

×