Ein Klassenname besteht aus drei Teilen: Vorsilbe (welche Familie), Block (welches Ding) und optional __Teil oder --Variante. Beispiel: c-card__inner ist der innere Teil der Karte, c-btn--primary die Hauptvariante des Buttons.
Die vier Vorsilben
| Vorsilbe | Familie | Was sie liefert | Beispiel |
|---|---|---|---|
t- |
Typografie | Schriftgröße, -art, -farbe, Zeilenabstand | t-heading--l |
c- |
Komponente | ein fertiges Bauteil mit allen Eigenschaften | c-btn--primary |
l- |
Layout | Anordnung, Breite, Abstände nach außen | l-section--m |
u- |
Helfer (Utility) | genau eine einzelne Eigenschaft | u-mb--l |
Die Vorsilbe sagt dir auch, wohin die Klasse gehört: l- an einen Container, t- an ein Textelement, c- an das Bauteil selbst, u- an das, dessen Eigenschaft du meinst.
Die zwei Striche: Variante
-- heißt „eine Ausprägung von“. Links steht das Ding, rechts die Spielart:
c-btn--primary— der Button in seiner Hauptvariantec-btn--secondary— derselbe Button, andere Ausprägungt-heading--l— die Überschrift in der Größe „l“
Daraus folgt die Regel, die sonst willkürlich wirkt: Zwei Varianten derselben Familie schließen sich aus. Ein Button kann nicht gleichzeitig primär und sekundär sein. Und die Grundform allein (c-btn) brauchst du nicht mitzuschreiben — die Variante bringt sie mit.
Der Doppel-Unterstrich: Teil
__ heißt „Bestandteil von“. Die Klasse gehört in einen bestimmten Zusammenhang und funktioniert nur dort:
c-card— die Karte (der äußere Container)c-card__media— die Bildfläche innerhalb der Kartec-card__inner— die Inhaltsfläche innerhalb der Karte
Ein c-card__media außerhalb einer c-card ergibt keinen sinnvollen Zustand. Umgekehrt gilt: Wenn du __ in einem Namen siehst, weißt du sofort, dass es einen übergeordneten Container geben muss.
Woher diese Schreibweise kommt
Das Muster heißt BEM — Block, Element, Modifier. Es ist eine seit Jahren verbreitete Namenskonvention aus der Webentwicklung, und ihr einziger Zweck ist Lesbarkeit: Man soll einem Klassennamen ansehen, wofür er da ist und wo er hingehört, ohne im CSS nachzuschauen.
| BEM-Begriff | Schreibweise | Im System |
|---|---|---|
| Block — das eigenständige Ding | c-card |
Karte, Button, Sektion |
| Element — ein Teil davon | c-card__inner |
Bildfläche, Inhaltsfläche |
| Modifier — eine Spielart | c-card--featured |
Größe, Farbe, Zustand |
Die Probe
Nimm einen Namen, den du nicht kennst, und zerlege ihn: u-bd--muted → Helfer (u-), also eine Eigenschaft · bd = border, Rahmen · --muted = die dezente Ausprägung. Ergebnis: ein dezenter Rahmen, sonst nichts.
Und umgekehrt: Wenn du einen Namen erfindest, der sich nicht so zerlegen lässt, gibt es ihn im System vermutlich nicht. Prüfen kannst du das immer im Klassen-Feld — steht der Name nicht in der Vorschlagsliste, existiert er nicht.