🧱 1. Die BEM-Anatomie im Überblick
BEM strukturiert Klassennamen nach einem eindeutigen Muster:
.block__element--modifier
Beispiel:
.pricing-card
.pricing-card__header
.pricing-card__title
.pricing-card--popular
Beispiel:
.pricing-card
.pricing-card__header
.pricing-card__title
.pricing-card--popular
| Komponente | Trennzeichen | Bedeutung | Beispiel |
|---|---|---|---|
| Block | - | Eigenständige UI-Komponente | .card, .btn |
| Element | __ (2 Unterstriche) |
Kind-Teil des Blocks | .card__title, .card__body |
| Modifier | -- (2 Bindestriche) |
Variante oder Zustand | .card--popular, .btn--primary |
🚫 2. Keine verschachtelten Selektorketten!
Der größte Vorteil von BEM: Jede Regel hat eine Spezifität von exakt (0, 1, 0). Nie wieder !important!
/* ❌ SCHLECHTES CSS (Spezifitätsfalle): */
.main-wrapper div.content-area > div.card .header h3.title { ... }
/* ✅ SAUBERES BEM (Flach, performant und überall wiederverwendbar): */
.pricing-card__title {
font-size: 1.25rem;
font-weight: 700;
}📦 Didaktische Analogie: Das modulare Küchenset
Ein Block ist der Mixer. Ein Element ist der Rührstab (ohne Mixer nutzlos). Ein Modifier ist der Turbo-Schalter am Mixer (eine Funktionsvariante). Jeder Teil hat sein klares Etikett, sodass nichts verwechselt wird.