Was sind die Vorteile der BEM-Methodik?

BEM (Block, Element, Modifier) – Methodologie zur Benennung von CSS-Klassen, die auf der Aufteilung der Benutzeroberfläche in unabhängige Blöcke basiert.

Vorteile:

• Modularität: Ermöglicht die Erstellung von UI-Komponenten, die unabhängig voneinander wiederverwendbar sind.
• Wartbarkeit: Dank einer klaren Namensstruktur ist es einfacher, Stile zu finden und zu ändern, ohne andere Teile des Projekts zu beeinflussen.
• Skalierbarkeit: Geeignet für große Projekte mit vielen Entwicklern, da es das Risiko von Konflikten bei Klassennamen reduziert.
• Klarheit: Klassennamen spiegeln die Struktur und Funktion der Elemente wider, was die Lesbarkeit des Codes verbessert.
• Vorhersehbarkeit: Die Stile eines Blocks sind unabhängig vom Kontext, was unerwartetes Verhalten ausschließt.
• Isolierung: Die Stile eines Blocks beeinflussen die Stile eines anderen nicht.

Beispiel:

/* Block button */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid blue;
}

/* Element icon innerhalb des Blocks button */
.button__icon {
  margin-right: 5px;
}

/* Modifikator primary für den Block button */
.button--primary {
  background-color: blue;
  color: white;
}

/* Modifikator disabled für den Block button */
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}