BEM (Block, Element, Modifier)

Bei der Entwicklung von Webanwendungen und Websites ist es wichtig, eine klare und konsistente Struktur für den Aufbau des HTML-Codes zu haben. Eine Methode, die sich dafür bewährt hat, ist BEM (Block, Element, Modifier).

Was ist BEM?

BEM ist ein Ansatz zur Benennung von CSS-Klassen, der dabei hilft, den Code übersichtlich und leichter wartbar zu machen. Es wurde von Yandex, einem russischen Suchmaschinenbetreiber, entwickelt und hat sich seitdem als Best Practice in der Webentwicklung etabliert.

Die Grundlagen von BEM

BEM besteht aus drei Hauptkomponenten: dem Block, dem Element und dem Modifier.

Block

Ein Block ist eine eigenständige Komponente auf einer Webseite. Er hat einen eindeutigen Namen und kann unabhängig von anderen Elementen existieren. Beispiele für Blöcke sind Header, Footer und Sidebar.

Element

Ein Element ist ein Bestandteil eines Blocks und kann nicht unabhängig existieren. Es ist eng mit dem Block verbunden und trägt dazu bei, seine Funktion zu erfüllen. Beispiele für Elemente sind Buttons, Links und Input-Felder.

Modifier

Ein Modifier ist eine Variante eines Blocks oder Elements. Er ändert das Aussehen, das Verhalten oder den Zustand des Blocks oder Elements. Beispiele für Modifier sind "active", "disabled" oder "small".

Vorteile von BEM

Der Einsatz von BEM hat mehrere Vorteile:

1. Übersichtlicher Code: Durch die klare Strukturierung des HTML-Codes wird es leichter, den Code zu lesen und zu verstehen.
2. Wartbarkeit: Änderungen und Anpassungen am Design oder an der Funktionalität können einfacher vorgenommen werden, da die einzelnen Komponenten klar voneinander abgegrenzt sind.
3. Wiederverwendbarkeit: Da Blöcke, Elemente und Modifier unabhängig voneinander existieren können, können sie in verschiedenen Kontexten wiederverwendet werden.
4. Konsistenz: Durch die einheitliche Benennung der Klassen wird eine konsistente Gestaltung der Website erreicht.

Anwendungsbeispiel

Ein Beispiel für die Anwendung von BEM könnte die Entwicklung einer Business-Website sein. Dabei könnte der Header als Block betrachtet werden, während das Logo und die Navigationselemente als Elemente innerhalb des Headers angesehen werden. Der Header könnte verschiedene Modifier haben, um verschiedene Zustände wie "fixed" oder "transparent" darzustellen.

Fazit

BEM ist eine Methode zur strukturierten Benennung von CSS-Klassen, die dabei hilft, den Code übersichtlich und wartbar zu machen. Durch die klare Trennung von Blöcken, Elementen und Modifiern wird eine konsistente Gestaltung der Website erreicht. Der Einsatz von BEM ist besonders empfehlenswert bei der Entwicklung von komplexen Webanwendungen und hochwertigen Websites.