CSS kann zwei Dinge sein: Ein mächtiges Werkzeug – oder ein endloses Chaos. Jeder, der schon mal an einer Website gearbeitet hat, kennt das Problem: Du änderst eine Klasse, und plötzlich sieht das ganze Layout aus wie ein Unfall in einer WordPress-Theme-Schmiede. Doch es gibt eine Lösung, die dein CSS sauber, skalierbar und verständlich macht: BEM.
Vielleicht hast du den Begriff schon mal gehört, vielleicht denkst du auch gerade: „Oh nein, nicht noch ein CSS-Namenskonzept!“ Aber glaub mir: Wenn du BEM erst einmal verstehst, wirst du nie wieder anders arbeiten wollen.
1. Warum CSS ohne Struktur zum Albtraum wird
Stell dir vor, du arbeitest an einer Website und dein CSS sieht ungefähr so aus:
.button {
background: red;
color: white;
padding: 10px;
}
.button2 {
background: blue;
}
.button3 {
font-weight: bold;
}
Drei verschiedene Buttons mit drei verschiedenen Namen – und jeder macht irgendwas anderes.
Dann änderst du .button, weil du denkst, es wäre sicher – und plötzlich sind die halbe Navigation und das Kontaktformular rot eingefärbt. Herzlichen Glückwunsch, du hast den “CSS-Schmetterlingseffekt” ausgelöst.
BEM hilft genau bei solchen Problemen, indem es eine klare Struktur für deine Klassen vorgibt.
2. Was ist BEM – und warum solltest du es nutzen?
BEM steht für Block, Element, Modifier und ist eine Methode, CSS-Klassen logisch und nachvollziehbar zu benennen.
Die drei Grundbausteine von BEM:
- Block → Das übergeordnete Element
- Element → Ein Teil des Blocks
- Modifier → Eine Variante oder ein Zustand des Blocks
Hier ein Beispiel für eine Card-Komponente:
.card { /* Block */ }
.card__title { /* Element */ }
.card--highlighted { /* Modifier */ }
Und das dazugehörige HTML:
<div class="card card--highlighted">
<h2 class="card__title">BEM ist super!</h2>
</div>
Wichtige Regeln:
- Elemente sind immer einem Block untergeordnet (block__element).
- Modifier werden mit doppeltem Bindestrich angehängt (block--modifier).
- Keine „freien“ Klassen, die sich irgendwohin auswirken.
3. Warum ist BEM so genial?
- Vermeidet Namenskonflikte: Mit .button oder .header zu arbeiten, ist gefährlich. Wer weiß, was sich sonst noch “Button” nennt? Mit BEM bleibt alles sauber getrennt.
- Macht CSS langfristig wartbar: Änderungen an einem Block beeinflussen nicht plötzlich andere Teile der Seite.
- Ideal für große Projekte & Teams: Jeder versteht auf einen Blick, was .menu__item--active bedeutet, ohne sich erst durch einen 3.000-Zeilen-CSS-File zu wühlen.
- Erleichtert Wiederverwendbarkeit: Ein .button--large kann überall verwendet werden, ohne dass andere .button-Elemente beeinflusst werden.
4. Häufige Fehler und Missverständnisse bei BEM
1. „BEM macht Klassennamen unnötig lang!“
Ja, BEM-Klassen sind länger als .box oder .title. Aber dafür sind sie eindeutig und selbsterklärend. Kein Ratespiel mehr, was .box2 eigentlich tut.
2. „BEM ist nur für große Teams sinnvoll.“
Auch Solo-Entwickler profitieren von BEM – spätestens, wenn sie sich nach sechs Monaten noch an ihren eigenen Code erinnern müssen.
3. „BEM und Utility-First (z. B. Tailwind) schließen sich aus.“
Nicht unbedingt! Man kann BEM als Grundstruktur verwenden und mit Utility-Klassen ergänzen.
Beispiel:
<button class="btn btn--primary text-lg">BEM + Utility</button>
Kurz gesagt: BEM ist kein Dogma, sondern eine sinnvolle Struktur, die sich flexibel anpassen lässt.
5. Wann ist BEM sinnvoll – und wann nicht?
Ideal für:
• Mittelgroße bis große Projekte, wo Ordnung wichtig ist.
• Teams, die einen gemeinsamen CSS-Stil brauchen.
• WordPress- oder Webflow-Projekte, bei denen eine klare Klassennamensstruktur Vorteile bringt.
Möglich, aber nicht immer nötig für:
• Kleine, statische Seiten mit minimalem CSS.
• Projekte, die stark auf Utility-First-Frameworks setzen (z. B. Tailwind).
• Designsysteme, die bereits eine klare Klassennamensstruktur haben.
Nicht sinnvoll für:
• Inline-Styles (😂).
• Projekte, in denen sich niemand um CSS kümmert und einfach überall !important verwendet wird.
6. Fazit: CSS braucht Struktur – und BEM ist eine der besten Methoden dafür
Ob du Freelancer, Agentur oder Teil eines Entwickler-Teams bist: BEM macht dein CSS wartbarer, verständlicher und skalierbarer.
Warum ich BEM liebe?
• Kein CSS-Chaos mehr.
• Einmal verstanden, überall anwendbar.
• Perfekt für saubere und strukturierte Frontend-Projekte.
Also, wenn du das nächste Mal dein CSS optimierst, frag dich:
Möchte ich ein System, das sich langfristig lohnt – oder ein Durcheinander, bei dem ich in drei Monaten nicht mehr durchblicke?
Falls dir sauberes CSS lieber ist: Probiere BEM aus!
