20.9.2020
BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.
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.
Veröffentlich auf dribbble.com - Schedule Application
by Jack W. for Queble
Im Detail interessieren uns die einzelnen Termine
Ein BEM Selektor ist wie folgt aufgebaut .block__element--modifier
Ein Block kann als eine Modulbezeichnung verstanden werden. In diesem Beispiel würde man ein Modul namens appointment anlegen.
Ein Element ist ein Bestandteil eines Blocks. In dem Beispiel kann man folgende Elemente identifizieren:
appointment__titleappointment__timeappointment__durationappointment__repeatitionappointment__placeappointment__participantappointment__badgeappointment__edit-buttonNeben den offensichtlichen Elementen kann es notwendig sein zusätzliche strukturierende Elemente hinzuzufügen. In diesem Fall gibt es noch folgende Elemente:
appointment__mainappointment__asideappointment__footerappointment__detailsNur 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.
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: &).
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.
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.
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.
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.