Was ist die BEM-Methodik?

BEM (Block, Element, Modifier) — eine Methodik zur Benennung von Klassen in CSS, um skalierbaren und wartbaren Code zu erstellen. Ziel ist es, Komponenten unabhängig, wiederverwendbar und leicht änderbar zu machen.

Grundprinzipien:

Block: Unabhängige Komponente mit einem eindeutigen Namen. Kann Elemente und andere Blöcke enthalten.
```
<div class="card">...</div>
```
Element: Teil des Blocks, der außerhalb des Kontexts des Blocks keine eigenständige Bedeutung hat. Der Name des Elements wird durch zwei Unterstriche (__) vom Blocknamen getrennt.
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modifier: Fügt dem Block oder Element einen Zustand hinzu oder ändert sein Aussehen/verhalten. Der Name des Modifiers wird durch zwei Bindestriche (--) vom Block- oder Elementnamen getrennt.
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Vorteile:

Lesbarkeit: Klassen sind leicht verständlich, die Struktur der Komponente ist sichtbar.
Wiederverwendbarkeit: Komponenten sind unabhängig und können in verschiedenen Teilen des Projekts verwendet werden.
Wartbarkeit: Änderungen an einer Komponente wirken sich kaum auf andere aus.
Skalierbarkeit: Geeignet für große Teams und Projekte.

Beispielstruktur:

.card {
  /* Stile des Blocks */
}

.card__title {
  /* Stile des Elements */
}

.card__text {
  /* Stile des Elements */
}

.card--featured {
  /* Stile des Modifikators des Blocks */
}

.button {
  /* Stile des Blocks */
}

.button--primary {
  /* Stile des Modifikators des Blocks */
}

.button--disabled {
  /* Stile des Modifikators des Blocks */
}