Block, Element, Modifier

Vorlage:Löschantragstext

Vorlage:Allgemeinverständlichkeit Block, Element, Modifier (BEM) ist ein Entwurfsmuster in der Frontend-Entwicklung. Es zielt darauf die Entwicklung von Web-Interfaces zu vereinfachen, die Performance im Rendering zu steigern und Elemente des Interface wiederverwendbar zu machen. BEM wurde zwischen 2007 und 2009 von Yandex entwickelt.^[1]

Konzept[edit | edit source]

In BEM wird eine Webseite in Blöcke und Elemente aufgeteilt. Elemente können nur innerhalb eines Blocks existieren. Blöcke hingegen können ebenfalls auch in anderen Blöcken existieren. Modifier dienen zur modifizieren des Standard Element order Blocks. Über Mofifier können beispielsweise Hover-Effekte realisiert werden.^[2]

Namenskonvention[edit | edit source]

Die Namenskonvention in BEM ist eine Kern-Komponente des Entwurfsmusters. Sie dient dazu eine flache CSS-Hierarchie zu erzeugen und vermeidet so die Spezifizierung-Problematik. Klassen sind, in BEM, folgendermaßen aufgebaut:

.block__element--modifier{}
.block--modifier{}

^[3]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, dass in der normalen Klassenbezeichnung nicht vorkommt.

BEM basierende Frameworks[edit | edit source]

Es gibt eine vielzahl von CSS-Frameworks, die auf BEM baiseren. Eine sehr bekannte Umsetzung ist Inuit.css von Harry Roberts

[1] Vorlage:Internetquelle

[2] Vorlage:Internetquelle

[3] Vorlage:Internetquelle

[1]

[2]

[3]