BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.
Wofür steht BEM?
Als Erstes die Basis – BEM steht für Block Element Modifier. Dabei handelt es sich um die drei Säulen der Benamung von Klassen im BEM Kontext.
Um das Ganze etwas plastischer zu gestalten werde ich das BEM Prinzip anhand eines Termins in einer Kalender-App darstellen.

by Jack W. for Queble
Im Detail interessieren uns die einzelnen Termine

Aufbau
Ein BEM Selektor ist wie folgt aufgebaut .block__element--modifier
Block
Ein Block kann als eine Modulbezeichnung verstanden werden. In diesem Beispiel würde man ein Modul namens appointment
anlegen.
Element
Ein Element ist ein Bestandteil eines Blocks. In dem Beispiel kann man folgende Elemente identifizieren:
- Titel –
appointment__title
- Zeit –
appointment__time
- Dauer –
appointment__duration
- Wiederholung –
appointment__repeatition
- Ort –
appointment__place
- Teilnehmer –
appointment__participant
- Tags –
appointment__badge
- Bearbeiten Button –
appointment__edit-button
Neben den offensichtlichen Elementen kann es notwendig sein zusätzliche strukturierende Elemente hinzuzufügen. In diesem Fall gibt es noch folgende Elemente:
- Hauptbereich –
appointment__main
- Seitenbereich –
appointment__aside
- Fußbereich –
appointment__footer
- Details –
appointment__details
Nur weil Elemente ineinander verschachtelt werden ergibt es meistens keinen Sinn das im Selektor abzubilden. Nur weil z.B. die Dauer im Details Bereich untergebracht ist sollte der Selektor trotzdem nicht appointment__details-duration
heißen. Der Hauptgrund dafür ist, dass bei diesem Selektor eine starke Bindung an den Details Bereich stattfinden würde. Wenn in einer späteren Anpassung der Details Bereich entfernt werden sollte steht appointment__duration
immer noch als eigenständiges Element für sich da und kann an einer anderen Stelle wiederverwendet werden.
Modifier
Ein Modifier wird benutzt um eine abweichende Darstellungsart zu kennzeichnen.
Der erste Termin ist rot und wird als Standardfall gesehen – appointment
. Der zweite Termin ist blau und bekommt die Klassen appointment appointment--blue
. Ein Modifier darf nicht für sich alleine stehen, sondern nur mit dem Standardfall zusammen. Der dritte Termin bekommt einen weiteren Modifier appointment appointment--purple
.
Modifier dürfen sowohl an einen Block als auch an ein Element gehangen werden. Es sind mehrere Modifier je Element zulässig. Für die Übersichtlichkeit sollte jedoch die Anzahl der Modifier je Element so klein wie möglich gehalten werden.
Müssen Elemente anhand von Modifiern angepasst werden, so kann es sinnvoll sein eine Variable mit dem Blockselektor anzulegen ($el: &
).
Beispiel
In folgendem Codepen sind alle zuvor besprochenen Details zu sehen.
See the Pen
BEM Beispiel by wesselbaum (@wesselbaum)
on CodePen.
Im Codepen sollte besonders die Verwendung von $el
und die mühelose Schreibweise von BEM in Kombination mit SCSS beachtet werden.
Vorteile
Wiederverwendbarkeit
Ein Modul ist in sich geschlossen und kann in der Regel ohne Probleme von einem Projekt in ein anderes übernommen werden. Wenn Wiederverwendbarkeit im Vordergrund steht empfiehlt sich eine intensive Verwendung von Variablen, um möglichst einfach Module in andere Projekte zu übernehmen.
Spezifizität
Der Selektor ist relativ unspezifisch. Block, Element und Modifier haben stets die Spezifizität von 0 1 0
. Bei Verschachtelung von Modifier und Elementen kann die Spezifizität auf 0 2 0
erhöht werden.
Diese niedrigen Spezifizitäten können bei Bedarf sehr einfach überschrieben werden und man weiß zu jedem Zeitpunkt mit welcher Spezifizität man es zu tun hat.
Zusammenfassung
Das Strukturieren von CSS mittels BEM erfordert einiges an Eingewöhnung. Ist der erste Schritt einmal getan, so skaliert das Vorgehen für alle Projekte, von klein bis riesig. Die Benamung gibt eine Struktur und alle Entwickler wissen wann welches Element ein Bestandteil von etwas größerem ist. Einzelne Module sind gut gekapselt und können in andere Projekte übernommen werden. Die Spezifizität ist meistens klar und die Regeln können bei Bedarf mit wenig Aufwand und vor allem ohne !important
überschrieben werden.
Hallo Alex. Klassennamen sollten generisch und nicht an die Eigenschaften gebunden sein.
Statt als modifier –blue oder –yellow, sollte man sprechende aber auch generische namen nehmen wie –alternate / –highlight/ –inverted damit es beim übernehmen in einen anderen scope oder bei einem rebranding nicht zu sowas kommt:
.block__element–blue: background-color: red;
Danke Katharina! Das ist ein guter Tipp.