Block Element Modifier (BEM)

Posted by in Grundlagen

Wenn man CSS/Sass/Less anfängt zu schreiben, dann nimmt man sich normalerweise vor, alles schön sauber zu halten. Das ist zu Anfang sehr einfach, aber ab einer gewissen Größe verliert sich ganz einfach die Struktur. Dann ist ein erster Schritt, die Dateien in logisch gekapselte Unterdateien zu zerlegen. Für mich hat das sehr gut funktioniert.

Ein Problem, das sich aber immer wieder in anderen Ausprägungen präsentiert ist der Umgang mit der Namensgebung. Benamung von Dingen ist in meinen Augen eines der zentralen Probleme eines Coders. Speziell im Team wird das eine Herausforderung.

Die Benamungs-Methodologie Block Element Modifier (BEM) für Klassennamen schafft hier eine interessante Abhilfe, die leicht zu erlernen ist.

Block

Ein Block steht für eine Komponente, die unabhängig von anderen Komponenten existieren kann. Zum Beispiel könnte ein Loginformular eine solche Komponente sein. Der Name darf aus Buchstaben (klein geschrieben), Ziffern und Bindestrichen bestehen. Der Name form-login hört sinnvoll an und entspricht der Konvention. Hier das HTML dazu:

Bei den CSS-Regeln ist darauf zu achten, dass nur die Klasse selbst gestylet wird:

Element

Elemente sind nicht unabhängig von anderen Komponenten, sondern direkt abhängig von ihren Elternkomponenten. Sie sind DOM-Knoten unterhalb von Blöcken und geben damit nur in diesem Kontext Sinn. Unsere Login-Form soll zwei Eingabefelder und einen Button enthalten. Die Namenskonvention schreibt vor, Buchstaben (klein geschrieben), Ziffern, Bindestriche und Unterstriche zu verwenden. Dem CSS-Klassennamen ist immer der übergeordnete Blockname gefolgt von zwei Unterstrichen voranzustellen.

War es beim Block noch einfach zu entscheiden, wie die CSS-Regeln aussehen sollen, so wird es bei einem Element etwas schwieriger. Es dürfen keine Ids oder Tags an sich selektiert werden. Auch die Abhängigkeit zum übergeordneten Block soll nur über den spezifischen Klassennamen ausgedrückt werden:

Modifier

Modifier sind dafür gedacht, bestimmten Elementen eine andere Eigenschaft zu geben. Erlaubt für die Namen eines Modifiers sind wieder Buchstaben (alle klein), Ziffern, Bindestriche und sogar Unterstriche. Sie werden mit zwei Bindestrichen an einen Block oder ein Element angehängt. Der Login-Form fehlt noch ein weiterer Button, an dem man die Funktionsweise erklären kann. Eine Passwort-Zurücksetzen-Funktionalität wäre nützlich:

Man beachte, dass der Klassenname der unmodifizierten Version auch mit in das Klassenattribut geschrieben wird, um alle Standardstyles mitzunehmen.

Für die CSS-Regeln gibt es zwei wichtige Regeln.

  • Für das individuelle Styling wieder nur den Klassennamen verwenden
  • Wenn ein Block modifiziert wird und Elemente darauf aufbauen ist für diese Regel das Block-Element mit voranzustellen:

Und alles zusammen an einer Komponente

Abschließend das komplette Beispiel das man auch unter https://jsbin.com/rawopezabi/edit?html,css,output ansehen und damit herumspielen kann:

Die Vorteile werden gut sichtbar. So kann zum Beispiel das allgemeine Button-Styling für diese Komponente mit einer einzigen Regeln vonstatten gehen. Spezialisierte Versionen erhalten einen Modifier. Durch das Namensschema sind außerdem lästige Probleme mit Unterstrich vs. Bindestrich Geschichte.

Fazit

BEM ist eine einfach zu erlernende Methodologie zur Benamung von CSS-Klassen und deren Styling. Wer mehr darüber erfahren will kann sich auf der folgenden Seite tiefer informieren: http://getbem.com/

Viel Spaß damit!