CSS bleibt in vielen Projekten lange übersichtlich — bis es wächst.
Am Anfang reichen ein paar Klassen, ein paar Komponenten und ein paar Anpassungen. Später kommen neue Seiten, neue Varianten, neue Zustände und kleine Sonderfälle dazu. Irgendwann weiß niemand mehr genau, welche Klasse wofür gedacht war und welche Änderung welche Stelle beeinflusst.
Genau an dieser Stelle hilft BEM.
BEM ist eine Methode, um CSS-Klassen klar und nachvollziehbar zu benennen. Sie macht Stylesheets nicht automatisch besser, aber sie gibt ihnen eine Struktur, die auch nach Monaten noch verständlich bleibt.
Warum CSS Struktur braucht
CSS ist flexibel. Das ist eine Stärke — und manchmal ein Problem.
Ohne klare Namenslogik entstehen schnell Klassen wie .box, .button2, .content-small oder .section-new. Sie funktionieren im Moment, sagen aber wenig darüber aus, wozu sie gehören oder wo sie verwendet werden.
Das wird spätestens dann schwierig, wenn eine Website wächst oder später angepasst werden soll. Eine kleine Änderung kann plötzlich andere Bereiche beeinflussen, weil Klassen zu allgemein benannt sind oder an mehreren Stellen unterschiedlich genutzt werden.
BEM hilft dabei, solche Abhängigkeiten sichtbarer zu machen. Jede Klasse beschreibt, zu welcher Komponente sie gehört, welches Element gemeint ist und ob es sich um eine Variante handelt.
Was BEM bedeutet
BEM steht für Block, Element und Modifier.
Ein Block ist eine eigenständige Komponente. Zum Beispiel eine Card, ein Button, eine Navigation oder ein Formular.
Ein Element ist ein Teil dieses Blocks. Bei einer Card können das zum Beispiel Titel, Text, Bild oder Button sein.
Ein Modifier beschreibt eine Variante oder einen Zustand. Zum Beispiel eine hervorgehobene Card, ein großer Button oder ein aktiver Menüpunkt.
Das Prinzip sieht so aus:
Block:
.card
Element:
.card__title
Modifier:
.card–highlighted
Die Klasse macht dadurch direkt sichtbar, worum es geht. .card__title ist nicht irgendein Titel auf der Website, sondern der Titel innerhalb der Card-Komponente.
Was BEM im Alltag verbessert
Der größte Vorteil von BEM ist nicht die Schreibweise selbst, sondern die Klarheit dahinter.
Wenn Klassen eindeutig benannt sind, wird CSS leichter nachvollziehbar. Du siehst schneller, welche Styles zu welcher Komponente gehören. Änderungen lassen sich gezielter machen, ohne dass unklar ist, welche anderen Bereiche betroffen sein könnten.
BEM hilft auch dabei, Komponenten wiederverwendbarer zu machen. Eine Card kann auf verschiedenen Seiten eingesetzt werden, ohne dass ihre Bestandteile jedes Mal neu benannt oder überschrieben werden müssen.
Gerade in Webflow- oder WordPress-Projekten kann eine klare Klassennamensstruktur viel Zeit sparen. Wenn ein Projekt später erweitert wird, ist sofort erkennbar, welche Klassen zusammengehören und welche Rolle sie im Layout spielen.
Häufige Missverständnisse
BEM wirkt am Anfang oft ungewohnt, weil die Klassennamen länger sind. Das ist aber kein Nachteil, wenn sie dafür eindeutig sind.
.card__title ist länger als .title, aber deutlich verständlicher. Sie sagt nicht nur, was das Element ist, sondern auch, wohin es gehört.
Ein weiteres Missverständnis ist, dass BEM nur für große Teams sinnvoll ist. Auch allein arbeitende Designer oder Entwickler profitieren davon. Gerade wenn ein Projekt nach einigen Monaten wieder angefasst wird, ist eine klare Struktur hilfreich.
BEM muss außerdem kein starres Dogma sein. Es lässt sich mit Utility-Klassen oder systematischen Webflow-Klassen kombinieren. Wichtig ist nicht, jede Regel perfekt auszureizen, sondern eine verlässliche Logik im Projekt zu haben.
Wann BEM sinnvoll ist
BEM lohnt sich besonders bei Websites, die wachsen, gepflegt oder erweitert werden sollen.
Dazu gehören größere Unternehmensseiten, CMS-Projekte, Webflow-Websites, WordPress-Themes, Komponentenbibliotheken oder Projekte mit mehreren Seitentypen.
Bei sehr kleinen Websites mit wenigen Styles kann BEM überdimensioniert wirken. Aber sobald Komponenten mehrfach verwendet werden, Varianten entstehen oder mehrere Personen am Projekt arbeiten, sorgt eine klare Benennung für deutlich mehr Ordnung.
Fazit
BEM ist keine magische Lösung für jedes CSS-Problem. Aber es ist eine einfache Methode, um Stylesheets verständlicher, wartbarer und besser skalierbar zu machen.
Der eigentliche Wert liegt in der Struktur. Klassen bekommen Bedeutung, Komponenten werden klarer abgegrenzt und Änderungen lassen sich gezielter vornehmen.
Gerade bei Websites, die langfristig gepflegt werden sollen, zahlt sich diese Klarheit aus. Nicht, weil BEM besonders kompliziert ist — sondern weil es CSS weniger zufällig macht.
