Wie erfolgt die Implementierung eines BEMs?

Question

Accepted Answer

Die Implementierung eines Block-Element-Modifier (BEM) Ansatzes erfolgt in mehreren Schritten:

1. **Struktur definieren**: Bestimme die Blöcke, die die Hauptkomponenten deiner Anwendung darstellen. Ein Block ist ein eigenständiges Element, das eine bestimmte Funktion hat (z.B. `header`, `button`).

2. **Elemente identifizieren**: Jedes Element innerhalb eines Blocks, das nicht unabhängig ist, wird als Element bezeichnet. Elemente werden durch zwei Unterstriche (`__`) vom Blocknamen getrennt (z.B. `button__icon`).

3. **Modifier festlegen**: Modifier sind Variationen eines Blocks oder Elements, die dessen Aussehen oder Verhalten ändern. Sie werden durch zwei Bindestriche (`--`) angehängt (z.B. `button--primary`).

4. **CSS-Klassen erstellen**: Erstelle die entsprechenden CSS-Klassen basierend auf der BEM-Nomenklatur. Zum Beispiel:
   ```css
   .button { /* Block */ }
   .button__icon { /* Element */ }
   .button--primary { /* Modifier */ }
   ```

5. **HTML-Struktur aufbauen**: Implementiere die HTML-Struktur unter Verwendung der definierten Klassen. Beispiel:
   ```html

Button Text
   
   ```

6. **Wiederverwendbarkeit sicherstellen**: Achte darauf, dass die Blöcke, Elemente und Modifier so gestaltet sind, dass sie in verschiedenen Kontexten wiederverwendet werden können.

7. **Dokumentation**: Halte eine klare Dokumentation über die verwendeten Blöcke, Elemente und Modifier, um die Wartung und Erweiterung zu erleichtern.

Durch die Anwendung des BEM-Ansatzes wird die Struktur und Lesbarkeit des Codes verbessert, was die Zusammenarbeit im Team und die Wartung des Projekts erleichtert.