BEM ist eine Namenskonvention für Klassen, die Block, Element und Modifikator in den Namen schreibt und damit Ordnung in große Stylesheets bringt.
- BEM (Namenskonvention)
Benennungsschema für CSS-Klassen, das Block, Element und Modifikator im Namen sichtbar macht.
Beispiel: „BEM steht für Block, Element, Modifier.“
Das Schema
.karte { }
.karte__titel { }
.karte--hervorgehoben { }Der Block ist die Einheit, das Element ein Teil davon, der Modifikator eine Abwandlung. Zwei Unterstriche trennen Element, zwei Bindestriche Modifikator.
Was es bringt
Jede Klasse sagt, wozu sie gehört, und die Spezifität bleibt flach, weil alles mit einer einzigen Klasse auskommt. Der Preis sind lange Namen. In großen Stylesheets mit mehreren Bearbeitern zahlt sich das meistens aus.