BEM: Benennung von Block, Element und Modifier
Wenden Sie die Block-Element-Modifier-Methode an, um vorhersehbare und wiederverwendbare Klassennamen zu erstellen.
BEM: Benennung von Block, Element und Modifier ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist BEM?
BEM (Block–Element–Modifier) ist eine Namenskonvention, die selbsterklärende Klassennamen erzeugt. Dadurch werden CSS-Komponenten vorhersehbar und dokumentieren sich selbst.
Block
Ein Block ist eine eigenständige, aussagekräftige UI-Komponente, die unabhängig existieren kann. Er bildet die Root-Klasse der Komponente.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Element
Ein Element ist ein untergeordnetes Element eines Blocks, das außerhalb des Blocks keine Bedeutung hat. Elemente verwenden zwei Unterstriche: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modifier
Ein Modifier ist eine Variante oder ein Status eines Blocks oder Elements. Modifier verwenden zwei Bindestriche: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Vollständiges BEM-Beispiel
Eine Kartenkomponente mit BEM-Namensgebung:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>BEM-CSS-Struktur
Das zugehörige CSS für die BEM-Karte:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Vorteil der BEM-Spezifität
BEM-Klassen bestehen jeweils aus einer einzelnen Klasse (Spezifität 0,1,0). Kein Selektor ist spezifischer als ein anderer, daher ist das Überschreiben unkompliziert — fügen Sie einfach die passende Modifier-Klasse hinzu.
Häufige BEM-Fehler
Vermeiden Sie diese BEM-Fallen:
- Elemente über mehrere Ebenen:
.card__body__title— reduzieren Sie dies auf.card__title - Elemente außerhalb ihres Blocks im HTML
- Verwendung von Elementselektoren wie
.nav__link a— dies erhöht die Spezifität unnötig
BEM mit benutzerdefinierten CSS-Eigenschaften
BEM und CSS-Variablen ergänzen sich gut. Definieren Sie Tokens auf Blockebene, die von Modifiern überschrieben werden:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Wann Sie BEM nicht verwenden sollten
BEM ist ausführlich und nicht ideal für Utility-Klassen oder einmalige Styles. Utility-First-Frameworks wie Tailwind ersetzen BEM vollständig. Verwenden Sie BEM für benutzerdefinierte Komponentenbibliotheken, bei denen semantische Namensgebung wichtig ist.
BEM in der Praxis
Viele Designsysteme verwenden BEM-Varianten oder ähnliche Namensschemata. Die konkrete Syntax ist weniger wichtig als das konsistente Prinzip: Block → Element → Modifier, keine tiefe Verschachtelung, flache Spezifität.
Kurzer Test
Welche Syntax steht in BEM für ein Element namens „title“ innerhalb eines „card“-Blocks?
Zusammenfassung
BEM verwendet die Namensbestandteile Block, Element und Modifier: .block__element--modifier. Alle Klassen bestehen aus einer einzelnen Klasse und haben dadurch eine flache, gleiche Spezifität. Elemente (__) gehören in ihren Block. Modifier (--) erzeugen Varianten. Vermeiden Sie tiefe Verschachtelungen wie .card__body__title — reduzieren Sie sie auf .card__title.
Häufig gestellte Fragen
Ist die Lektion „BEM: Benennung von Block, Element und Modifier“ kostenlos?
Ja — der vollständige Text von „BEM: Benennung von Block, Element und Modifier“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „BEM: Benennung von Block, Element und Modifier“?
Wenden Sie die Block-Element-Modifier-Methode an, um vorhersehbare und wiederverwendbare Klassennamen zu erstellen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „BEM: Benennung von Block, Element und Modifier“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Warum CSS-Architektur wichtig ist
- BEM: Benennung von Block, Element und Modifier
- Dateiorganisation: ITCSS und 7-1-Muster
- Spezifitätskonflikte vermeiden