BEM – „Das Ende des Spezifizitätskrieges“

©2016 Stefan Franke
BEModer „Das Ende des Spezifizitätskrieges“
https://en.bem.info/methodology/

jeder kocht sein/ihr eigenes Süppchen
inhomogene Namensgebung
keine bis wenig Struktur bzw. Semantik
Verwendung von !important
Inline-Styles
»
»
»
»
»
Status quo

Inline-Styles
„specificity war“
https://jonassebastianohlsson.com/specificity-graph/
»
»
»
»
»


Status quo

Inline-Styles
„specificity war“
https://jonassebastianohlsson.com/specificity-graph/
CSS-Code nicht erweiterbar, wartbar oder wiederverwendbar
»
»
»
»
»



Status quo

Hauptsächlich Fokus auf Eigenschaften & Werte
div.product table td a.button { ... }
typische Frage:
„Ist das Screendesign korrekt umgesetzt?“

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




BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung



»
»
»

BEM
Block
Element
Modifier
einfaches System
geringe Lernkurve
große Umstellung
oft fehlendes
Problembewusstsein!



»
»
»


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
»
»

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

Was ist ein Block?
logisch und funktional unabhängiger Bestandteil der Website
logo
head
nav
call-to-action
search

Blöcke sind wiederverwendbar
Block

Was ist ein Element?
Ein Element ist ein Bestandteil eines Blocks.
kann nicht ohne den Kontext des Blocks existieren
Block
Element

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

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

Beispiele
www.newser.com

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:

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>
</ul>
Kapselung durch CSS-Klassen
jeder anzusprechende DOM-Node bekommt eine eigene CSS-Klasse
»
»
alt:
neu:

In medias res – der CSS-Code
<ul class="nav">
</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
»
»
»
»
»

nur bei Modifiern erlaubt!
Beispiel „Element-Modifier“:
<ul class="nav nav--minimal">
</ul>
CSS:
.nav--minimal .nav__item { }

Selektorketten sind böööse

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

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

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




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!



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




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

BEM Mix



header
header__logo header__nav header__search
logo nav search

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

„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

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 }

„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

„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

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





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

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/





Vielen Dank für die Aufmerksamkeit!

BEM – „Das Ende des Spezifizitätskrieges“

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie BEM – „Das Ende des Spezifizitätskrieges“

Ähnlich wie BEM – „Das Ende des Spezifizitätskrieges“ (20)

BEM – „Das Ende des Spezifizitätskrieges“