Was ist BEM?
BEM steht für Block, Element, Modifier. Es ist eine Methodologie zur Namensgebung und Strukturierung von HTML- und CSS-Klassen, die von der russischen Suchmaschinenfirma Yandex entwickelt wurde. Die Methode hat sich als äußerst effektiv erwiesen, um die Skalierbarkeit und Wartbarkeit von Webprojekten zu verbessern.
Warum ist BEM wichtig?
BEM erleichtert das Leben von Entwicklern auf mehrere Arten. Durch die klare Struktur und Terminologie reduziert es die Komplexität des Codes und macht ihn leichter lesbar und wartbar. Es ermöglicht auch eine bessere Zusammenarbeit im Team, da die einheitliche Syntax und Strukturierung das Verständnis des Codes erleichtert.
Die Bestandteile von BEM: Block, Element, Modifier
Block
Ein Block ist ein unabhängiges, wiederverwendbares und in sich geschlossenes Designelement. In BEM steht der Block im Mittelpunkt und dient als Container für Elemente und Modifikatoren. Beispiele für Blöcke könnten Navigation, Header, Footer oder ein Button sein.
Element
Ein Element ist ein Bestandteil eines Blocks, der keinen Sinn außerhalb des Blocks hat. Zum Beispiel könnte ein Menüeintrag ein Element im Block "Navigation" sein.
Modifier
Ein Modifier ist eine Flagge, die an einen Block oder ein Element angehängt wird, um dessen Aussehen, Verhalten oder Zustand zu verändern. Beispielsweise könnte ein Button den Modifier --disabled haben, der ihn grau färbt und unanklickbar macht.
Implementierung von BEM
In der Praxis sieht eine BEM-Implementierung in der Regel so aus:
<!-- Block -->
<div class="button">
<!-- Element -->
<span class="button__text">Klick mich!</span>
</div>
<!-- Block mit Modifier -->
<div class="button button--disabled">
<!-- Element -->
<span class="button__text">Klick mich nicht!</span>
</div>
BEM und Preprozessoren
BEM lässt sich ausgezeichnet mit CSS-Preprozessoren wie SASS oder LESS kombinieren. Hier können verschachtelte Regeln und Variablen dazu verwendet werden, den BEM-Code noch strukturierter und wiederverwendbarer zu gestalten.
Vorteile und Nachteile von BEM
Vorteile
- Klare und verständliche Struktur
- Erleichterte Teamarbeit
- Wiederverwendbarkeit von Komponenten
Nachteile
- Erhöhte Klassenname-Länge
- Anfangs möglicherweise verwirrend oder überwältigend
Fazit
BEM ist eine robuste Methodologie für die Frontend-Entwicklung, die die Wartbarkeit und Skalierbarkeit von Projekten verbessert. Durch die klare Trennung von Blöcken, Elementen und Modifikatoren bietet es eine hervorragende Grundlage für ein effizientes und effektives CSS-Design.