CSS-Namenskonventionen: BEM, OOCSS, SMACSS im Vergleich

Die Benennung von CSS-Klassen mag trivial erscheinen, aber in großen Codebases wird sie zu einer der wichtigsten Architekturentscheidungen. Eine gute Namenskonvention verhindert Spezifitätskonflikte, reduziert Namenskollisionen und macht Stylesheets selbstdokumentierend.

Warum CSS-Benennung wichtig ist

CSS hat einen globalen Namensraum. Jeder Klassenname ist überall verfügbar, und Spezifitätsregeln bestimmen, welche Stile gewinnen. Ohne eine Namenskonvention erstellen Teams unweigerlich Konflikte: Zwei Entwickler benennen ihre Klasse beide .card, und einer überschreibt den anderen.

BEM (Block Element Modifier)

BEM ist die am weitesten verbreitete CSS-Namenskonvention. Sie verwendet ein strukturiertes Muster:

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

/* Beispiel */
.card {}
.card__title {}
.card__image {}
.card--featured {}
.card__title--large {}

BEM-Regeln

• Block: Eine eigenständige Komponente. In kebab-case benannt: .search-form, .nav-bar.
• Element: Ein Teil eines Blocks ohne eigenständige Bedeutung. Doppelter Unterstrich als Trenner: .search-form__input.
• Modifier: Eine Variante oder ein Zustand eines Blocks/Elements. Doppelter Bindestrich als Trenner: .search-form--dark.

BEM-Vorteile

• Selbstdokumentierend: .card__title--highlighted sagt genau, was es ist
• Niedrige Spezifität: alles ist ein einzelner Klassen-Selektor
• Keine Namenskollisionen: der Blockname scoped alles
• Framework-agnostisch: funktioniert mit jedem Tech-Stack

OOCSS (Objektorientiertes CSS)

OOCSS trennt Struktur von Skin und Container von Inhalt:

/* Struktur */
.media { display: flex; align-items: start; }
.media__body { flex: 1; }

/* Skin */
.theme-dark { background: #333; color: #fff; }
.theme-light { background: #fff; color: #333; }

OOCSS erstellt hochgradig wiederverwendbare Utility-Objekte, kann aber zu vielen Klassen auf einem einzelnen HTML-Element führen.

SMACSS (Scalable and Modular Architecture)

SMACSS kategorisiert CSS-Regeln in fünf Typen mit Präfixen:

Kategorie	Präfix	Beispiel
Base	keiner	html, body, h1
Layout	l-	.l-sidebar
Modul	keiner	.card
State	is-	.is-active
Theme	t-	.t-dark

CSS Modules und CSS-in-JS

Moderne Frameworks wie React bieten Alternativen, die Namenskollisionen auf Werkzeugebene lösen:

• CSS Modules: Scoped Klassennamen automatisch. Sie schreiben .title, das Build-Tool gibt .Card_title_x7kd2 aus. Verwenden Sie camelCase für Klassennamen, da sie zu JavaScript-Properties werden.
• Tailwind CSS: Verwendet Utility-Klassen und eliminiert benutzerdefinierte Benennung vollständig.
• styled-components / Emotion: CSS-in-JS mit automatisch generierten Klassennamen.

Welchen Ansatz sollten Sie wählen?

Ansatz	Am besten für
BEM	Traditionelles CSS, Teams mit mehreren Entwicklern, CMS-Themes
CSS Modules	React/Vue/Svelte-Komponentenprojekte
Tailwind	Rapid Prototyping, Utility-first-Workflows
SMACSS	Große Legacy-Codebases, die Organisation brauchen

Klassennamen konvertieren

CSS-Klassen verwenden immer kebab-case. Konvertieren Sie aus anderen Formaten mit unserem kebab-case-Konverter. Wenn Sie camelCase für CSS Modules benötigen, nutzen Sie den camelCase-Konverter oder den Case-Converter-Hub.