BEM (Block Element Modifier) ist eine Methode zur Organisation von CSS-Regeln, die dazu beiträgt, CSS-Dateien konsistenter und leichter verständlich zu gestalten. Es handelt sich um eine Naming-Konvention, die von Yandex in 2005 entwickelt wurde, um die Erstellung von skalierbaren und wartbaren CSS-Codebasen zu erleichtern.
Bei der Verwendung von BEM wird jeder Bestandteil einer Website (z.B. eine Navigationsleiste, ein Bild oder ein Button) als ein “Block” betrachtet. Innerhalb dieses Blocks können “Elemente” definiert werden, die spezifische Teile des Blocks darstellen (z.B. eine Schaltfläche innerhalb der Navigationsleiste). “Modifier” sind optional und ermöglichen es, verschiedene Versionen des Blocks oder Elements zu erstellen (z.B. eine Schaltfläche in einem inaktiven oder aktivierten Zustand).
BEM verwendet einen klaren Namenskonventionsstil, bei dem Bindestriche (-) und Unterstriche (_) verwendet werden, um die verschiedenen Teile des Namens zu trennen. Zum Beispiel könnte eine Schaltfläche innerhalb einer Navigationsleiste folgendermaßen benannt werden: ".navigation__button--active", wobei "navigation" der Block, "button" das Element und "active" der Modifier ist.
Durch die Verwendung von BEM können CSS-Dateien leichter zu lesen und zu verstehen sein, was die Wartung und Skalierung von Codebasen erleichtert. Es kann auch helfen, CSS-Regeln konsistenter zu gestalten, da jeder Block und jedes Element einen eindeutigen Namen hat, der die Art und Weise beschreibt, wie es auf der Website verwendet wird.
Vorteile
- Modularität: Block-Stile sind niemals von anderen Elementen auf einer Seite abhängig, sodass Sie nie Probleme durch Kaskadierung erfahren werden. Sie erhalten auch die Fähigkeit, Blöcke von Ihren fertigen Projekten auf neue zu übertragen.
- Wiederverwendbarkeit: Das Zusammenstellen unabhängiger Blöcke auf verschiedene Arten und deren intelligente Wiederverwendung reduziert die Menge an CSS-Code, den Sie pflegen müssen. Mit einem Satz von Stilrichtlinien können Sie eine Bibliothek von Blöcken erstellen und Ihren CSS-Code äußerst effektiv gestalten.
- Struktur: Die BEM-Methodik gibt Ihrem CSS-Code eine solide Struktur, die einfach und leicht verständlich bleibt.
Alternative Methoden zu BEM
- OOCSS — Separating container and content with CSS “objects”
- SMACSS — Style-guide to write your CSS with five categories for CSS rules
- SUITCSS — Structured class names and meaningful hyphens
- Atomic — Breaking down styles into atomic, or indivisible, pieces