Block


Als Block wird eine eigenständige Einheit bezeichnet. Da die Einheit unabhängig von ihrem Einsatzort existiert, ist sie für sich genommen von Bedeutung. Blocknamen sind entweder einheitliche html-Namen wie footer, header, main, input usw, oder sie werden eigens für ein Projekt vergeben und kommen nur in der speziell genutzten Anwendung zur Verwendung. Ein Block ist wie ein Abschnitt eines Dokuments zu verstehen.

Er ist zum Beispiel eine Fußzeile, eine Kopfzeile oder eine Seitenleiste. Ein Block kann weitere Blöcke enthalten.

 


Element


Ein Element führt eine bestimmte Funktion aus und ist Teil eines Blocks. Nur im Kontext des Blocks, zu dem es gehört, ist es sinnvoll. Es ist also kontextabhängig. Es ist nicht möglich, dass ein Element noch weitere Elemente beinhaltet. Das Element gehört genau zu einem Block und kann außerhalb des Blocks nicht verwendet werden.

 


Modifier


Für minimale Veränderungen der Standardvariante werden Modifier genutzt. Die Wahl des Namens erfolgt auf der Basis der Semantik.

 

Beispiel:

bem beispiel

 


Namensgebung


Der Name, der einer BEM-Entität gegeben wurde, ist eindeutig. In allen Technologien (html, JavaScript und CSS) hat dieselbe BEM-Entität auch immer denselben Namen.

  • Der Block stellt die erste Abstraktionsebene dar. Vor den Namen wird ein kurzer Präfix gesetzt (.block), um eine CSS-Klasse zu bilden. Der Name eines Blocks kann neben lateinischen Buchstaben auch aus Ziffern und Bindestrichen bestehen.
  • Die Gestaltung des Blocks erfolgt über die Elemente in zweiter Ebene. Namen von Elementen können neben lateinischen Buchstaben und Ziffern auch aus Binde- und Unterstrichen bestehen.
  • In dritter Ebene erfolgt die Modifikation durch den Modifier oder Modifikator. Die Modifikation kann für ein Element oder für einen Block erfolgen. In komplizierten Modifikationen werden Leerzeichen durch einen Bindestrich ersetzt.
  • .block__element–modifier oder .block—modifier oder .block__element—color-green

Regeln zur Benennung


 

  • Nutzung lateinischer Kleinbuchstaben
  • Trennung der Wörter durch einen Bindestrich (-)
  • Über den Blocknamen wird der Namespace für die Elemente und Modifikationen des Blocks definiert
  • Namespaces sind strukturierte Hierarchien und ermöglichen die Wiederverwendung der Namen in verschiedenen Kontexten
  • Vom Blocknamen wird der Elementname durch doppelten Unterstrich getrennt (__)
  • Der Modifier-Name wird entweder vom Block- oder vom Elementnamen durch einen doppelten Bindestrich getrennt (–)

Verwendung von SASS/SCSS


SASS heißt Syntactically Awesome Stylesheets, SCSS steht für Sassy Cascading Style Sheets. Es handelt sich um einen CSS-Präprozessor, der dabei hilft, die Stylesheets schneller zu schreiben und gleichzeitig die Methodik des BEM anzuwenden. Durch das Zusammenspiel verschwinden einige Probleme, die es beim CSS gab. Die Schreibweise wird mit Anwendung von SASS oder SCSS stark vereinfacht. Variable sind nun fest definiert. Es entsteht eine übersichtlichere Darstellung bei viel weniger Schreibarbeit. Und nicht nur das Lesen der Stylesheets ist mit BEM einfacher geworden, sondern auch das Warten. Mit Verwendung der Variablen ist eine einfachere Überarbeitung gewährleistet.

 


Fazit


Sobald sie sich streng an die BEM-Konventionen halten, können Entwickler später jederzeit ihre Cascading Style Sheets aktualisieren, ohne befürchten zu müssen, dass diese Änderungen negative Nebenwirkungen hervorrufen.