it-praxisportal/courses/html_css/13_bem_methodik_und_modularitaet

CSS 13: BEM-Methodik & Modulare CSS-Architektur

In großen Web-Projekten wird unstrukturiertes CSS schnell zu einem unkontrollierbaren Chaos aus Spezifitätskriegen und !important-Hacks. Die BEM-Methodik (Block, Element, Modifier) löst dieses Problem durch eine glasklare, modulare Namenskonvention.

---

🎯 Lernziele

1. BEM-Syntax verstehen: Block (.card), Element (.card__header), Modifier (.card--featured).
2. Spezifitätskriege vermeiden: Flache Selektor-Hierarchien mit nur 1 Klasse Spezifität (0, 1, 0).
3. Wiederverwendbarkeit maximieren: Isolierte UI-Komponenten, die an jeder Stelle der Website funktionieren.
4. Element- vs. Block-Modifier: Wann nutzt man .btn--primary vs. .card__title--large?
5. Praxisnahe Card-Komponenten: Aufbau einer robusten Produktkarten-Bibliothek.

---

🧠 Die BEM-Formel im Detail

BEM steht für:

• B (Block): Eine eigenständige, wiederverwendbare UI-Komponente (z. B. .card, .btn, .navbar).
• E (Element): Ein zwingender Teil eines Blocks, der außerhalb keinen Sinn ergibt. Getrennt mit zwei Unterstrichen __ (z. B. .card__title, .card__body, .card__image).
• M (Modifier): Eine visuelle Variante oder ein Zustand eines Blocks oder Elements. Getrennt mit zwei Bindestrichen -- (z. B. .card--featured, .btn--primary, .card__badge--success).

<!-- BEM HTML Struktur -->
<article class="card card--featured">
  <div class="card__header">
    <h3 class="card__title">Pro Plan</h3>
    <span class="card__badge card__badge--popular">Bestseller</span>
  </div>
  <div class="card__body">
    <p class="card__text">Alle Premium-Features freigeschaltet.</p>
  </div>
  <div class="card__footer">
    <button class="btn btn--primary btn--large">Jetzt upgraden</button>
  </div>
</article>

/* BEM CSS: Flache Selektoren ohne Verschachtelung! */
.card { ... }
.card--featured { border-color: #6366f1; }

.card__header { display: flex; justify-content: space-between; }
.card__title { font-size: 1.25rem; font-weight: 700; }
.card__badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 9999px; }
.card__badge--popular { background: #f59e0b; color: white; }

.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; }
.btn--primary { background: #4f46e5; color: white; }
.btn--large { padding: 12px 24px; font-size: 1.1rem; }

---

🎯 Aufgabenstellung in aufgabe.html

• TEILZIEL 1: Stylinge den Block .pricing-card und seine Elemente .pricing-card__header, .pricing-card__title, .pricing-card__price, .pricing-card__features und .pricing-card__footer.
• TEILZIEL 2: Implementiere den Block-Modifier .pricing-card--popular mit markanter Randfarbe (border-color: #8b5cf6), Glow-Schatten und Transform.
• TEILZIEL 3: Stylinge den Button-Block .btn sowie die Modifiers .btn--primary und .btn--outline.
• TEILZIEL 4: Stylinge das Badge-Element .pricing-card__badge und den Modifier .pricing-card__badge--highlight.

Teste deine BEM-Architektur mit test_aufgabe.js!