BEM-Methodik: Block, Element, Modifier
Benennen Sie CSS-Klassen nach dem Muster Block__Element--Modifier, um selbstdokumentierende, wenig spezifische und wiederverwendbare Komponentenstile zu erstellen.
BEM-Methodik: Block, Element, Modifier ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist BEM?
BEM (Block, Element, Modifier) ist eine CSS-Namenskonvention, die Styles vorhersehbar, wiederverwendbar und konfliktfrei macht. Indem die Komponentenstruktur in Klassennamen codiert wird, verhindert BEM Spezifitätskonflikte und unbeabsichtigte Überschneidungen von Styles.
Blöcke – eigenständige Komponenten
Ein Block ist eine unabhängige, wiederverwendbare Komponente: card, button, nav. Der Klassenname entspricht dem Namen des Blocks und wird in Kleinbuchstaben mit Bindestrichen geschrieben.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elemente – Teile eines Blocks
Ein Element ist ein Teil eines Blocks, das für sich allein keine Bedeutung hat. Verwenden Sie zwei Unterstriche: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modifier – Varianten und Zustände
Ein Modifier verändert das Aussehen oder Verhalten eines Blocks oder Elements. Verwenden Sie zwei Bindestriche: block--modifier oder block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>BEM-CSS-Regeln
BEM-Klassen haben eine niedrige, einheitliche Spezifität (jeweils nur eine Klasse). Dadurch lassen sich Styles einfach überschreiben. Verwenden Sie niemals IDs oder verschachtelte Elementselektoren – sie erhöhen die Spezifität auf unvorhersehbare Weise.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM mit Sass
Der übergeordnete Sass-Selektor & macht das Schreiben von BEM weniger ausführlich. Das kompilierte CSS ist mit einfachem BEM identisch.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Wann Sie einen neuen Block erstellen sollten
Erstellen Sie einen neuen Block, wenn die Komponente eigenständig funktionieren und in verschiedenen Kontexten wiederverwendet werden kann. Erstellen Sie ein Element, wenn der betreffende Teil nur innerhalb eines bestimmten Blocks sinnvoll ist.
BEM vermeidet Verschachtelungen
BEM rät von tiefen Verschachtelungen in HTML und CSS ab. Ein Element innerhalb eines Elements bleibt block__element und wird nicht zu block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM und JavaScript
Verwenden Sie für Hooks, die das Verhalten steuern, eine separate, JavaScript-spezifische Klasse mit dem Präfix js-. Dadurch werden Styling und Skripting entkoppelt – die Umbenennung einer BEM-Klasse beeinträchtigt das JavaScript-Verhalten nicht.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);BEM-Blöcke mischen
Ein Element kann mehrere Block-Klassen haben, um eine kontextspezifische Gestaltung zu ermöglichen, ohne die Blöcke voneinander abhängig zu machen.
<button class="btn btn--primary form__submit">Submit</button>Einschränkungen von BEM
Klassennamen können sehr lang werden. BEM eignet sich am besten für große Teams und Designsysteme, bei denen eine einheitliche Gestaltung über das gesamte Projekt hinweg wichtig ist. Bei Komponenten-Frameworks wie React oder Vue mit bereichsgebundenen Styles sind die Vorteile des BEM-Namensraums weniger entscheidend.
Kurzer Test
Was stellt card__title--truncated in BEM dar?
Zusammenfassung: BEM
Block: eigenständige Komponente. Element (zwei Unterstriche __): Teil eines Blocks. Modifier (zwei Bindestriche --): Variante oder Zustand. Niedrige, einheitliche Spezifität. Vermeiden Sie ID-Selektoren und tiefe Verschachtelungen. Verwenden Sie das Präfix js- für JavaScript-Hooks. Sass & macht BEM weniger ausführlich. Hervorragend für große Teams und Designsysteme geeignet.
Häufig gestellte Fragen
Ist die Lektion „BEM-Methodik: Block, Element, Modifier“ kostenlos?
Ja — der vollständige Text von „BEM-Methodik: Block, Element, 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 Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „BEM-Methodik: Block, Element, Modifier“?
Benennen Sie CSS-Klassen nach dem Muster Block__Element--Modifier, um selbstdokumentierende, wenig spezifische und wiederverwendbare Komponentenstile zu erstellen. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 1 von 4.
Wie lange dauert die Lektion „BEM-Methodik: Block, Element, 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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- BEM-Methodik: Block, Element, Modifier
- CSS Modules: bereichsbezogene Klassennamen
- CSS-in-JS: Styled-components und Emotion
- Tailwind CSS: Utility-First-Ansatz