BEM und CSS-Namenskonventionen, mit Klassennamen-Builder | We.Inc
Wie BEM Blocks, Elements und Modifier benennt, mit einem Builder, der deine Klassennamen prüft. Vergleiche BEM mit Utility-Klassen, CSS Modules und @scope.
BEM und CSS-Namenskonventionen
BEM steht für Block, Element, Modifier. Ein Block ist eine eigenständige Komponente wie .card, ein Element ist ein Teil, der nur innerhalb des Blocks Sinn ergibt, geschrieben als .card__title mit zwei Unterstrichen, und ein Modifier ist eine Variante, geschrieben als .card--featured mit zwei Bindestrichen. Modifier werden neben der Basisklasse ergänzt, niemals statt ihr.
BEM in einer Tabelle
Teil
Muster
Beispiel
Block
.search-form
Element
block__element
.search-form__input
Block-Modifier
block--modifier
.search-form--compact
Element-Modifier
block__element--modifier
.search-form__button--disabled
Modifier mit Schlüssel und Wert
block--key-value
.search-form--theme-dark
An der Benennung entscheidet sich, ob CSS-Projekte aufgeräumt bleiben oder langsam zu einem Haufen von Überschreibungen werden. Diese Seite erklärt die BEM-Regeln von der offiziellen BEM-Website, prüft deine eigenen Klassennamen während des Tippens und vergleicht BEM mit den anderen Wegen, mit denen Teams heute verhindern, dass sich Styles in die Quere kommen.
Gib im Builder einen Block-Namen ein, optional danach ein Element und einen Modifier.
Lies die erzeugten Klassennamen und das HTML, das sie verwendet. Warnungen erscheinen, wenn ein Name gegen eine BEM-Regel verstößt.
Kopiere das HTML- und CSS-Gerüst in deine Komponente.
Selektiere nur mit der einzelnen Klasse. .card .card__title erhöht die Spezifität, die BEM gerade vermeiden soll.
Verkette niemals Elemente wie .card__body__title. Jedes Element gehört direkt zum Block, egal wie tief es im HTML sitzt.
Behalte die Basisklasse neben einem Modifier: class="btn btn--large", nicht class="btn--large" allein.
Benenne Dinge danach, was sie sind, nicht wie sie aussehen. .alert--error übersteht ein Redesign, .alert--red nicht.
Wähle eine Konvention pro Projekt und halte sie schriftlich fest. Ein Mix aus Stilen ist schwerer zu lesen als jeder einzelne.
Häufige Fragen
Wofür steht BEM?
Block, Element, Modifier. Es ist eine Benennungsmethode für CSS-Klassen, die jeden Selektor auf eine einzige Klasse beschränkt. So bleibt die Spezifität flach, und du erkennst am Klassennamen, zu welcher Komponente er gehört.
Warum verwendet BEM doppelte Unterstriche und doppelte Bindestriche?
Einfache Bindestriche werden bereits innerhalb von Namen verwendet, wie in search-form. Doppelte Trennzeichen machen die Grenze zwischen Block, Element und Modifier eindeutig, sodass sich .search-form__submit-button als ein Block und ein Element lesen lässt.
Lohnt sich BEM noch mit Tailwind oder CSS Modules?
Mit Utility-Klassen schreibst du selten Klassennamen für Komponenten, BEM spielt also eine kleinere Rolle. Bei CSS Modules übernimmt das Build-Tool das Scoping der Namen für dich, und kurze camelCase-Namen werden empfohlen. Für reines CSS, Sass, WordPress-Themes und Designsysteme, die über Frameworks hinweg geteilt werden, ist BEM weiterhin eine starke Wahl.
Wie benenne ich ein Element innerhalb eines Elements?
Hänge es an den Block, nicht an das übergeordnete Element. Ein Titel im Body einer Karte heißt .card__title, auch wenn das HTML ihn in .card__body verschachtelt. Ist der verschachtelte Teil für sich wiederverwendbar, mach stattdessen einen neuen Block daraus.
Das Problem, das Namenskonventionen lösen
Jede CSS-Klasse lebt in einem einzigen globalen Namensraum. Zwei Entwickler, die in verschiedenen Dateien .title schreiben, stylen irgendwann gegenseitig ihre Überschriften, und die übliche Lösung, ein längerer Selektor, startet ein Wettrüsten bei der Spezifität.
Eine Konvention gibt jeder Klasse einen Besitzer. Wenn sich .pricing-card__price falsch verhält, weißt du, welche Komponente du öffnen musst, und du kannst die Komponente löschen, weil du weißt, dass ihre Klassen nirgendwo anders verwendet werden.
Wenn Blocks Blocks enthalten
Ein Block darf in einem anderen Block sitzen. Ein Button in einer Karte bleibt .btn, und wenn die Karte ihn positionieren muss, kann dasselbe Element beide Klassen tragen: class="btn card__action".
Diese Kombination hält die eigenen Styles des Buttons wiederverwendbar, während die Karte über ihre Element-Klasse nur das Layout steuert, etwa margin oder Ausrichtung.
Natives CSS-Scoping holt auf
Mit @scope kannst du Regeln auf einen Teilbaum beschränken, zum Beispiel auf alles innerhalb von .card, aber nicht innerhalb einer verschachtelten .card__media. Es hat 2026 den Baseline-Status "neu verfügbar" erreicht, prüfe also die Browser deines Publikums, bevor du dich allein darauf verlässt.
Cascade Layers lösen ein verwandtes Problem: Mit ihnen legst du eine Rangfolge für ganze Gruppen von Styles fest, sodass ein Reset oder ein Theme von Drittanbietern deine Komponenten nie übertrumpft, egal wie spezifisch seine Selektoren sind.
BEM im Vergleich mit anderen Ansätzen
Wege, Kollisionen von Klassennamen zu vermeiden
Ansatz
Beispiel
Wer Namen eindeutig hält
Passt am besten zu
BEM
.card__title--large
Du, per Konvention
Reines CSS, Sass, CMS-Themes
Utility-Klassen (Tailwind)
text-lg font-semibold
Keine Komponentennamen nötig
Aus Komponenten gebaute Apps
CSS Modules
styles.cardTitle
Das Build-Tool schreibt Namen um
React, Vue und Ähnliches mit Bundler
@scope
@scope (.card) { h2 {} }
Der Browser begrenzt die Regeln
Neuere Browser, schlankes Markup
Eine vollständige BEM-Komponente
Card-Block mit Elements und Modifiern
Jeder Selektor ist eine Klasse. Der Modifier featured ändert den Rahmen und lässt ein Element über den Block-Modifier darauf reagieren.
Häufige BEM-Fehler
Falsch und richtig
Falsch
Richtig
Warum
.card__body__title
.card__title
Elements gehören zum Block, nicht zu anderen Elements
class="card--featured"
class="card card--featured"
Ein Modifier braucht seine Basisklasse
.card .card__title
.card__title
Zusätzliche Verschachtelung erhöht die Spezifität
div.card__title
.card__title
BEM-Selektoren verwenden nur Klassennamen
.card--blue
.card--primary
Benenne die Bedeutung, nicht die Farbe
BEM-Klassennamen-Builder
Gib Block, Element und Modifier ein, um Klassennamen samt passendem HTML und CSS zu erhalten, mit Warnungen, wenn ein Name gegen eine Regel verstößt.
Block
Element (optional)
Modifier (optional)
Block
Element
Modifier
{label}: Füge __ oder -- nicht selbst ein, der Builder ergänzt die Trennzeichen.
{label}: Verwende lateinische Kleinbuchstaben, Ziffern und einfache Bindestriche.