Block, Element, Modifier
# Block, Element, Modifier

Block, Element, Modifier (BEM) ist eine Namenskonvention in die Softwareentwicklung für die Elemente einer Webseite bzw. Weboberfläche.

BEM wurde zwischen 2007 und 2009 vom russischen Suchmaschinenbetreiber Yandex entwickelt.

## Konzept

In BEM wird die Hypertext Markup Language, das übliche HTML einer Webseite, in Blöcke und Elemente aufgeteilt. Elemente existieren nur innerhalb eines Blocks, Blöcke können auch in anderen Blöcken existieren. Die Modifier verändern die Darstellung der Elemente und Blöcke.

Als Beispiel dient Pinterest, ein Online-Pinnwand für Grafiken und Fotografien mit optionalem sozialen Netzwerk und visueller Suchmaschine.

### Block

Der Block ist eine HTML-Einheit, die unabhängig von ihrem Einsatzort existiert. Für gewöhnlich enthalten Blöcke HTML-Elemente zur Navigation (nav), zu Kopfzeile (header), Fußzeile (footer) oder zu ungeordneten Listen <ul>. Weitere Blöcke können definiert werden, wenn sie Eigenschaften haben, die in einer speziellen Anwendung genutzt werden.

### Element

Die Elemente bestehen auch aus HTML, sind aber an einen Block gebunden, z. B. die Listenelemente <ul> oder <ol> und <li>. Ob ein bestimmtes Objekt auf der Webseite zum Element oder zum Block wird, hängt vom Kontext ab. Soll das Objekt unabhängig vom umgebenden Block genutzt werden, sollte es nicht ein Element, sondern ein Block sein. Umgekehrt, wenn das Objekt nicht wiederverwendet wird und nur im Kontext eines Blocks nutzbar ist, wird es als Element angelegt.

### Modifier

Modifier werden für kleine Veränderungen in der Gestaltung von Blöcken und Elementen genutzt. Diese Anweisungen gehören zu den HTML-Elementen und sie bestimmen das Aussehen der Website. Beispielsweise betreffen sie das Format einer Schaltfläche, die Farbvariante oder die Größe. Realisiert werden sie über Cascading Style Sheets (CSS). Gute Modifier sind ein wesentlicher Teil von BEM.

## Namenskonvention

Die Namenskonvention in BEM ist der Kern des Entwurfsmusters. Sie dient dazu, eine flache CSS-Hierarchie zu erzeugen. CSS-Klassen sind in BEM folgendermaßen aufgebaut:

Die Trennzeichen zwischen Block und Element, sowie zwischen Block/Element und Modifier, sind frei wählbar. Sollten sie vom Standard abweichen ist ein Trennzeichen zu wählen, das in der normalen Klassenbezeichnung nicht vorkommt.

### BEM-basierte Frameworks

Es gibt eine Vielzahl von CSS-Frameworks, die auf BEM basieren. Eine sehr bekannte Umsetzung ist inuit.css von Harry Roberts.

### Anwendungsbeispiel

Das Beispiel zeigt die Restrukturierung des Codes der Pinterest Startseite.

Eine mosaikartig zusammengesetzte Grafik ist eine Kachelgrafik, die einzelnen Blöcke und Elemente werden Tiles genannt. Das Standard Tile sieht wie folgt aus:

Die Blöcke und Elemente sowie deren Modifier eines Featured Tiles sind:

Die Klassenbezeichnung zeigt, dass die Blöcke für die Wiederverwendbarkeit geschrieben wurden. So kann der Block Showcast ebenso in einem völlig anderen Kontext eingesetzt werden, zum Beispiel bei einem Blog-Artikel.

Das folgende Beispiel zeigt das vollständige HTML-Markup für das Featured Tile und für das Standard Tile inklusive grid. Das tile-grid dient als Schnittstelle und Wrapper-Software für alle Tiles, was die Positionierung auf der Website vereinfacht.

Dagegen hat das HTML Markup des echten Featured Tile von Pinterest die folgende, komplexe Form:

Das HTML Markup eines Standard Tile in Pinterest sieht wie folgt aus:

