Weitere ähnliche Inhalte Ähnlich wie BEM – „Das Ende des Spezifizitätskrieges“ (20) BEM – „Das Ende des Spezifizitätskrieges“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. ©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. ©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
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
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. ©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. ©2016 Stefan Franke
Was ist ein Block?
logisch und funktional unabhängiger Bestandteil der Website
logo
head
nav
call-to-action
search
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. ©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. ©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
20. ©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:
21. ©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:
22. ©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
»
»
»
»
»
23. ©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
24. ©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
25. ©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
26. ©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
27. ©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!
28. ©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
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
30. ©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
31. ©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
33. ©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
34. ©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
35. ©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 }
36. ©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
37. ©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
38. ©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
39. ©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
40. ©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/