©2016 Stefan Franke
BEModer „Das Ende des Spezifizitätskrieges“
https://en.bem.info/methodology/
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
V...
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
V...
©2016 Stefan Franke
jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
V...
©2016 Stefan Franke
Hauptsächlich Fokus auf Eigenschaften & Werte
div.product table td a.button { ... }
typische Frage:
„I...
©2016 Stefan Franke
Bisher kaum Fokus auf Architektur
div.product table td a.button { ... }
Mit Architektur:
Vorhersagbark...
©2016 Stefan Franke
BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung



»
»
»
©2016 Stefan Franke
BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung
oft fehlendes
Problembe...
©2016 Stefan Franke
Hintergrund
seit 2009
von Yandex entwickelt
einige Varianten der Nomenklatur
z.B. Google Developers (M...
©2016 Stefan Franke
Hintergrund
seit 2009
von Yandex entwickelt
einige Varianten der Nomenklatur
z.B. Google Developers (M...
©2016 Stefan Franke
Was ist ein Block?
logisch und funktional unabhängiger Bestandteil der Website
logo
head
nav
call-to-...
©2016 Stefan Franke
Blöcke sind wiederverwendbar
Block
©2016 Stefan Franke
Was ist ein Element?
Ein Element ist ein Bestandteil eines Blocks.
kann nicht ohne den Kontext des Blo...
©2016 Stefan Franke
Was ist ein Modifier?
bestimmt das Aussehen eines Blocks oder Elements abhängig vom jeweiligen
Kontext...
©2016 Stefan Franke
BEM ♥ Namenskonventionen
Kleinschreibung
Minus-Zeichen, um einzelne Wörter innerhalb eines Namens zu t...
©2016 Stefan Franke
©2016 Stefan Franke
Beispiele
www.newser.com
©2016 Stefan Franke
Element in Element – BEM says „no“
block__elem-1__elem-2
zu große Abhängigkeit von der Struktur des HT...
©2016 Stefan Franke
In medias res – der HTML-Code
<ul class="nav">
<li class="item active"><a>1</a></li>
<li class="item">...
©2016 Stefan Franke
In medias res – der CSS-Code
<ul class="nav">
<li class="nav__item nav__item--active"><a class="nav__l...
©2016 Stefan Franke
nur bei Modifiern erlaubt!
Beispiel „Element-Modifier“:
<ul class="nav nav--minimal">
<li class="nav__...
©2016 Stefan Franke
Diskussion „mehrere vs. ein zusammengefasster Modifier“
class="nav__item nav__item--active nav__item--...
©2016 Stefan Franke
Diskussion „mehrere vs. ein zusammengefasster Modifier“
class="nav__item nav__item--active nav__item--...
©2016 Stefan Franke
IDs und Tags im CSS-Code nicht erlaubt
IDs erhöhen Spezifizität
Tags erzeugen unnötige Abhängigkeiten
...
©2016 Stefan Franke
IDs und Tags im CSS-Code nicht erlaubt
IDs erhöhen Spezifizität
Tags erzeugen unnötige Abhängigkeiten
...
©2016 Stefan Franke
Hinweise zur Benennung von CSS-Klassen
aussagekräftige Klassennamen (d.h. nur ganz offensichtliche Abk...
©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Begi...
©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Begi...
©2016 Stefan Franke
Block, Element oder beides?
Block kann weitere Blöcke enthalten
Element eines Blocks gleichzeitig Begi...
©2016 Stefan Franke
Verzeichnis- und Dateistruktur
components.less header.less
logo.less
logo--top-bar.less
nav.less
nav--...
©2016 Stefan Franke
„Puh, da muss man ja sooo viel schreiben!“
CSS-Code wird schlanker durch geringe Spezifizität
geringer...
©2016 Stefan Franke
BEM + LESS/SASS
// Block
.nav {
	
// Element
&__item {
background-color: @color-primary
// Modifier
&-...
©2016 Stefan Franke
„Pah, das ist für Leute, die sich mit CSS nicht auskennen.“
falsche Frage: „Ist das Screendesign korre...
©2016 Stefan Franke
„Pfff, das File-System ist ja der komplette Overkill.“
strukturiert und übersichtlich
@import: PhpStor...
©2016 Stefan Franke
TL;DL – too long, didn’t listen
BEM bringt Struktur in den CSS-Code
BEM löst die Abhängigkeit zwischen...
©2016 Stefan Franke
TL;DL – too long, didn’t listen
BEM bringt Struktur in den CSS-Code
BEM löst die Abhängigkeit zwischen...
©2016 Stefan Franke
Mehr davon? Interessante und weiterführende Links
https://en.bem.info/methodology/
https://getmdl.io/
...
©2016 Stefan Franke
Vielen Dank für die Aufmerksamkeit!
BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“
Nächste SlideShare
Wird geladen in …5
×

BEM – „Das Ende des Spezifizitätskrieges“

165 Aufrufe

Veröffentlicht am

CSS-Code kann schnell wachsen, wuchern und unübersichtlich werden. BEM ist (neben OOCSS und SMACSS) eine Möglichkeit, um Struktur, Skalierbarkeit und Flexibilität im CSS-Code zu erhalten.

Veröffentlicht in: Internet
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
165
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

BEM – „Das Ende des Spezifizitätskrieges“

  1. 1. ©2016 Stefan Franke BEModer „Das Ende des Spezifizitätskrieges“ https://en.bem.info/methodology/
  2. 2. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles » » » » » Status quo
  3. 3. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles „specificity war“ https://jonassebastianohlsson.com/specificity-graph/ » » » » »   Status quo
  4. 4. ©2016 Stefan Franke jeder kocht sein/ihr eigenes Süppchen inhomogene Namensgebung keine bis wenig Struktur bzw. Semantik Verwendung von !important Inline-Styles „specificity war“ https://jonassebastianohlsson.com/specificity-graph/ CSS-Code nicht erweiterbar, wartbar oder wiederverwendbar » » » » »    Status quo
  5. 5. ©2016 Stefan Franke Hauptsächlich Fokus auf Eigenschaften & Werte div.product table td a.button { ... } typische Frage: „Ist das Screendesign korrekt umgesetzt?“
  6. 6. ©2016 Stefan Franke Bisher kaum Fokus auf Architektur div.product table td a.button { ... } Mit Architektur: Vorhersagbarkeit Skalierbarkeit & Flexibilität niedrige Spezifizität    Ohne Architektur: unvorhersehbare Nebeneffekte unnötige Abhängigkeiten hohe Spezifizität bzw. Überqualifizierung   
  7. 7. ©2016 Stefan Franke BEM Block Element Modifier einfaches System geringe Lernkurve große Umstellung    » » »
  8. 8. ©2016 Stefan Franke BEM Block Element Modifier einfaches System geringe Lernkurve große Umstellung oft fehlendes Problembewusstsein!    » » » 
  9. 9. ©2016 Stefan Franke Hintergrund seit 2009 von Yandex entwickelt einige Varianten der Nomenklatur z.B. Google Developers (Material Design Lite, Web Starter Kit) » » » » Alternativen: OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“) SMACSS » »
  10. 10. ©2016 Stefan Franke Hintergrund seit 2009 von Yandex entwickelt einige Varianten der Nomenklatur z.B. Google Developers (Material Design Lite, Web Starter Kit) » » » » Alternativen: OOCSS (YouTube-Tipp: „Nicole Sullivan CSS“) SMACSS » » Kritik: nicht streng genug Kritik: zu streng
  11. 11. ©2016 Stefan Franke Was ist ein Block? logisch und funktional unabhängiger Bestandteil der Website logo head nav call-to-action search
  12. 12. ©2016 Stefan Franke Blöcke sind wiederverwendbar Block
  13. 13. ©2016 Stefan Franke Was ist ein Element? Ein Element ist ein Bestandteil eines Blocks. kann nicht ohne den Kontext des Blocks existieren Block Element
  14. 14. ©2016 Stefan Franke Was ist ein Modifier? bestimmt das Aussehen eines Blocks oder Elements abhängig vom jeweiligen Kontext bzw. Status Modifier können mehrfach vergeben werden » » Block modifizierter Block
  15. 15. ©2016 Stefan Franke BEM ♥ Namenskonventionen Kleinschreibung Minus-Zeichen, um einzelne Wörter innerhalb eines Namens zu trennen doppelter Unterstrich für Element doppeltes Minus-Zeichen für Modifier » » » » Block Element Modifier block-name block-name__elem-name block-name--mod-name block-name__elem-name--mod-name
  16. 16. ©2016 Stefan Franke
  17. 17. ©2016 Stefan Franke Beispiele www.newser.com
  18. 18. ©2016 Stefan Franke Element in Element – BEM says „no“ block__elem-1__elem-2 zu große Abhängigkeit von der Struktur des HTML-Codes <div class="block"> <h3 class="block__title"></h3> <div class="block__content"> <img class="block__img"> <p class="block__text"> <a class="block__link"></a> </p> </div> </div> BEM-Elemente haben flache Struktur:
  19. 19. ©2016 Stefan Franke In medias res – der HTML-Code <ul class="nav"> <li class="item active"><a>1</a></li> <li class="item"><a>2</a></li> <li class="item"><a>3</a></li> </ul> <ul class="nav"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> Kapselung durch CSS-Klassen jeder anzusprechende DOM-Node bekommt eine eigene CSS-Klasse » » alt: neu:
  20. 20. ©2016 Stefan Franke In medias res – der CSS-Code <ul class="nav"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> .nav {} .nav__item {} .nav__item--active {} .nav__link {} flache Struktur (DOM-Änderungen jederzeit möglich) alle Anweisungen haben gleiche Spezifizität wiederverwendbar (Ähnlichkeiten zu OOP) keine unerwarteten Nebeneffekte semantisch aufgeladener CSS-Code » » » » »
  21. 21. ©2016 Stefan Franke nur bei Modifiern erlaubt! Beispiel „Element-Modifier“: <ul class="nav nav--minimal"> <li class="nav__item nav__item--active"><a class="nav__link">1</a></li> <li class="nav__item"><a class="nav__link">2</a></li> <li class="nav__item"><a class="nav__link">3</a></li> </ul> CSS: .nav--minimal .nav__item { }  Selektorketten sind böööse
  22. 22. ©2016 Stefan Franke Diskussion „mehrere vs. ein zusammengefasster Modifier“ class="nav__item nav__item--active nav__item--last" class="nav__item nav__item--active--last" Problem: mehrere Modifier
  23. 23. ©2016 Stefan Franke Diskussion „mehrere vs. ein zusammengefasster Modifier“ class="nav__item nav__item--active nav__item--last" class="nav__item nav__item--active--last" Reihenfolge! Redundanz! Problem: mehrere Modifier Vorschlag: mehrere Modifier verwenden
  24. 24. ©2016 Stefan Franke IDs und Tags im CSS-Code nicht erlaubt IDs erhöhen Spezifizität Tags erzeugen unnötige Abhängigkeiten   div.nav header .nav__item .aside h3    .nav .nav--header .nav__item .teaser--aside .teaser__title   
  25. 25. ©2016 Stefan Franke IDs und Tags im CSS-Code nicht erlaubt IDs erhöhen Spezifizität Tags erzeugen unnötige Abhängigkeiten   div.nav header .nav__item .aside h3    .nav .nav--header .nav__item .teaser--aside .teaser__title    Exkurs: IDs nur für JavaScript verwenden! Klassen sollten nicht als JavaScript-Selektoren dienen!  
  26. 26. ©2016 Stefan Franke Hinweise zur Benennung von CSS-Klassen aussagekräftige Klassennamen (d.h. nur ganz offensichtliche Abkürzungen) keine visuellen Merkmale im Klassennamen   .nav__item--active .nav__item--disabled .headline--primary    .nav__item--border .nav__item--grey .headline--red   
  27. 27. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse  
  28. 28. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse BEM Mix    header header__logo header__nav header__search
  29. 29. ©2016 Stefan Franke Block, Element oder beides? Block kann weitere Blöcke enthalten Element eines Blocks gleichzeitig Beginn eines neuen Blocks Kind-Block erhält Element-Klasse des Eltern-Blocks & Kind-Block-Klasse BEM Mix    header header__logo header__nav header__search logo nav search
  30. 30. ©2016 Stefan Franke Verzeichnis- und Dateistruktur components.less header.less logo.less logo--top-bar.less nav.less nav--footer.less gallery.less … @import CSS-Datei (TYPO3-Extension „t3_less“) jeder Block bzw. Block-Modifier bekommt eigene LESS-/SASS-Datei
  31. 31. ©2016 Stefan Franke „Puh, da muss man ja sooo viel schreiben!“ CSS-Code wird schlanker durch geringe Spezifizität geringerer Zeitaufwand für Änderungen CSS-Preprocessor (LESS, SASS)    BEM ist bäh #1
  32. 32. ©2016 Stefan Franke BEM + LESS/SASS // Block .nav { // Element &__item { background-color: @color-primary // Modifier &--active { background-color: lighten(@color-primary, 5) } } } resultierender CSS-Code .nav__item { background-color: #abcdef } .nav__item--active { background-color: #bcdefa }
  33. 33. ©2016 Stefan Franke „Pah, das ist für Leute, die sich mit CSS nicht auskennen.“ falsche Frage: „Ist das Screendesign korrekt umgesetzt?“ richtige Frage: „Kann der CSS-Code gewartet, wiederverwendet und ohne unerwünschte Nebeneffekte erweitert werden?“   BEM ist bäh #2
  34. 34. ©2016 Stefan Franke „Pfff, das File-System ist ja der komplette Overkill.“ strukturiert und übersichtlich @import: PhpStorm short cut [Strg] + B Blöcke schnell entfernen bzw. hinzufügen Kapselung der MediaQuery-Styles (print, responsive) in einer Datei     BEM ist bäh #3
  35. 35. ©2016 Stefan Franke TL;DL – too long, didn’t listen BEM bringt Struktur in den CSS-Code BEM löst die Abhängigkeit zwischen HTML- und CSS-Code Spezifizität wird auf Minimum reduziert IDs und Tags im CSS-Code verboten    
  36. 36. ©2016 Stefan Franke TL;DL – too long, didn’t listen BEM bringt Struktur in den CSS-Code BEM löst die Abhängigkeit zwischen HTML- und CSS-Code Spezifizität wird auf Minimum reduziert IDs und Tags im CSS-Code verboten     schont NERVEN & ZEIT
  37. 37. ©2016 Stefan Franke Mehr davon? Interessante und weiterführende Links https://en.bem.info/methodology/ https://getmdl.io/ https://developers.google.com/web/tools/starter-kit/ https://www.theodo.fr/blog/2015/10/how-i-stopped-worrying- and-learned-to-love-the-css-with-bem/    
  38. 38. ©2016 Stefan Franke Vielen Dank für die Aufmerksamkeit!

×