Ein BEM-Element sollte zu einer Komponente werden, wenn es einen eigenständigen Zweck hat und seine Implementierung außerhalb des übergeordneten Blocks verwalten kann. Mit der folgenden lokalen Mac-Übung kannst du diese Grenze prüfen, bevor du Klassen umbenennst oder CSS verschiebst.

Was macht ein Element unabhängig?

Wer eine selbst erstellte HTML-Seite pflegt, steht praktisch vor der Frage, ob ein wachsender Abschnitt Teil seines übergeordneten Elements bleiben oder zu einem separat gepflegten Block werden sollte. BEM definiert einen Block als eine logisch und funktional unabhängige Komponente; ein Element gehört zu einem Block und kann nicht unabhängig davon verwendet werden. Blöcke können andere Blöcke enthalten. Grundlegende Konzepte

Betrachte eine fiktive Seite mit einem workbench-Block. Sein workbench__preview enthält eine abstrakte Form, eine Bezeichnung und eine Bildunterschrift. Anfangs dienen alle drei nur der Werkbank. Später wird dieselbe Vorschau auch in einem schmalen Bereich namens shelf benötigt. Diese zweite Platzierung bietet einen konkreten Anlass zur Extraktion: Ermittle, ob die Vorschau zu einem shape-tile-Block mit eigenem Erscheinungsbild und eigener interner Struktur werden kann.

Die Verschachtelungstiefe allein entscheidet darüber nicht. BEM erlaubt verschachtelte Elemente im DOM, hält ihre Namen aber flach: workbench__preview, workbench__label und workbench__caption. Ein Name wie workbench__preview__caption drückt fälschlich aus, dass ein Element zu einem anderen Element gehört. Der offizielle Schnellstart erkennt außerdem einen Service-Block als Option an, wenn ein komplexes Element intern unabhängig organisierte Teile benötigt. Schnellstart

Unterscheide zwischen dem Verschieben von Markup in eine separate Vorlage, um die Lesbarkeit zu verbessern, und dem Einführen eines neuen BEM-Blocks. Du kannst die erste Änderung vornehmen, ohne dich sofort auf die zweite festzulegen. Mache die Blockgrenze deutlich, wenn du beschreiben kannst, wofür der extrahierte Teil zuständig ist, was sein Host bereitstellt und wie er an einer anderen Stelle eingesetzt wird.

Vor dem Extrahieren Abhängigkeiten prüfen

Die folgende Entscheidungshilfe ist eine redaktionelle Methode, die sich aus dem BEM-Grundsatz der Unabhängigkeit ableitet. Sie ist kein offizielles Bewertungssystem. Wende sie auf einen möglichen Teilbaum an, statt die ganze Seite auf einmal zu bewerten.

Frage Hinweise für eine Extraktion Grund, das Element beizubehalten
Hat es einen klaren Zweck? „Zeigt eine Form mit Bezeichnung und Bildunterschrift“ Sein Zweck ist lediglich „der innere Wrapper der Werkbank“
Kann es sein internes Erscheinungsbild selbst verwalten? Rahmen, Abstände und Typografie gehören zusammen Diese Regeln sind untrennbar mit der Struktur des übergeordneten Elements verbunden
Kann der Host die Platzierung separat festlegen? Der Host steuert den verfügbaren Platz und die umgebenden Abstände Das mögliche neue Element benötigt ein bestimmtes übergeordnetes Layout-Element
Beschreiben seine Varianten das Element selbst? Eine kompakte Kachel ist an mehreren Stellen sinnvoll Jede Variante ist nach einem bestimmten übergeordneten Element benannt
Würde eine separate Pflege jetzt helfen? Es gibt eine zweite Platzierung oder eine erhebliche interne Zuständigkeit Die Extraktion würde eine Schnittstelle ohne aktuellen Nutzen schaffen

Formuliere vor einer Codeänderung einen Satz: „Die shape-tile ist für ihre Form, Bezeichnung, Bildunterschrift und internen Abstände zuständig; der Host ist für die Platzierung und die verfügbare Breite zuständig.“ Wenn dieser Satz immer länger wird und auch die Spaltenanordnung der Werkbank oder die Reihenfolge benachbarter Elemente umfasst, überdenke, wo die Grenze liegen sollte.

Trenne äußeres Layout vom internen Erscheinungsbild. Die CSS-Richtlinien von BEM ordnen die äußere Geometrie und Positionierung dem übergeordneten Element zu und zeigen, wie eine unabhängige Blockklasse mit der Elementklasse des übergeordneten Blocks auf demselben Knoten kombiniert wird. Diese Kombination heißt Mix. CSS-Methodik

Zum Beispiel kann class="shape-tile workbench__preview" beide Identitäten ausdrücken. Lass shape-tile den Rahmen und das interne Layout festlegen und workbench__preview die Platzierung. Weise dieselbe Eigenschaft nicht über beide Identitäten zu, es sei denn, die Überschreibung ist bewusst Teil der Vereinbarung.

Auf deinem Mac einen lokalen Vergleich erstellen

Erstelle für diese Übung einen neuen Ordner, damit du das extrahierte Design vergleichen kannst, ohne eine bestehende Seite zu verändern. Du brauchst einen Texteditor und einen Desktop-Browser; für das Beispiel sind weder eine Paketinstallation noch JavaScript, heruntergeladene Schriftarten oder Bilddateien erforderlich.

Wähle in TextEdit Datei > Neu und dann Format > In reinen Text umwandeln. Füge das folgende HTML ein und speichere es als index.html. Wähle bei entsprechender Aufforderung Use .html. Apple dokumentiert diese Schritte und erläutert außerdem, wie HTML als Quelltext erneut geöffnet wird, indem man Ignore rich text commands wählt. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

Das vollständige HTML-Dokument erstellen

Dieses Dokument platziert dieselbe vorgeschlagene Komponente in zwei Hosts. Alle Bezeichnungen sind fiktiv, und die abstrakte Form wird mit CSS gezeichnet. Speichere den folgenden Inhalt als index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Das vollständige Stylesheet hinzufügen

Erstelle im selben Ordner eine weitere reine Textdatei namens styles.css. Achte darauf, dass der tatsächliche Dateiname styles.css lautet und nicht styles.css.txt. Füge das vollständige Stylesheet ein:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Öffne index.html in Safari oder einem anderen Desktop-Browser. Der vorgesehene Vergleich zeigt eine breitere Werkbank und ein schmaleres Regal. Ihre Kacheln teilen sich dasselbe Komponenten-Styling; der verfügbare Platz bestimmt, ob Form und Text nebeneinander passen oder umgebrochen werden.

Der Ressourcenvertrag ist hier wichtig: rel="stylesheet" legt eine externe Stylesheet-Ressource fest, und href="styles.css" gibt die Datei an, die dieses Dokument benötigt. Eine BEM-Klasse hinzuzufügen, stellt diese Ressourcenverknüpfung nicht her. Lass beide Dateien beim Verschieben der Übung zusammen. Der HTML-Standard definiert diese Stylesheet-Beziehung. HTML-Standard: Linktyp „stylesheet“

Woran erkennst du, ob die Extraktion gelungen ist?

Nutze den Vergleich als Diagnoseübung. Die erwarteten Ergebnisse unten ergeben sich aus dem bereitgestellten Code; es sind Prüfungen, die du im Browser durchführen sollst, keine berichteten Browser-Testergebnisse.

  1. Ausgangszustand prüfen. Beide Kacheln sollten einen weißen Hintergrund, eine blaue abgerundete Form, eine Bezeichnung und eine Bildunterschrift haben. Wenn alles ungestylt aussieht, prüfe den Stylesheet-Dateinamen und den Link, bevor du die Komponentengrenze beurteilst.
  2. Eine Platzierungsklasse entfernen. Lösche workbench__preview von der ersten Kachel, speichere die Datei und lade die Seite neu. Ihr oberer Abstand sollte sich ändern, während ihr internes Erscheinungsbild erhalten bleibt.
  3. Eine Host-Klasse entfernen. Entferne vorübergehend workbench aus dem umgebenden Abschnitt. Dessen Host-Rahmen und feste Breite sollten verschwinden; die Kachel sollte ihre Komponentenstile behalten.
  4. Die gemeinsame Komponente ändern. Ändere den Randradius in .shape-tile. Beide Instanzen sollten sich ändern, ohne dass du einen der Host-Selektoren bearbeiten musst.
  5. Den Inhalt auf die Probe stellen. Ersetze eine Bildunterschrift durch einen längeren fiktiven Satz und verkleinere das Browserfenster. Prüfe den Textumbruch und ob der gesamte Text sichtbar bleibt.

Interpretiere Fehler anhand der Zuständigkeiten. Verschwindet nach dem Entfernen der Host-Klasse ein Rahmen, könnte ein Komponentenstil noch dem Host-Selektor zugeordnet sein. Unerwartete Abstände im Umfeld deuten auf Platzierungsregeln hin. Abweichungen beim Text können auf geerbte Stile oder globale Selektoren hindeuten. Behebe die zuständige Abhängigkeit, bevor du eine weitere Überschreibung hinzufügst.

Die BEM-Benennung erzeugt keine vom Browser erzwungene Stil-Isolierung. Die CSS-Vererbung setzt sich im Dokumentbaum fort: Geerbte Eigenschaften übernehmen Werte des übergeordneten Elements, wenn die Kaskade für das Element keinen Wert vorgibt. Dies ist in der Spezifikation für CSS-Kaskadierung und Vererbung festgelegt und auf MDN veranschaulicht. CSS Cascading and Inheritance Module Level 5, Abschnitt 7.2, Vererbung

Im Beispiel werden Schriftart und Textfarbe der Kachel absichtlich an ihrer Wurzel festgelegt. Auf einer echten Seite kann es stattdessen sinnvoll sein, die Typografie der Website zu erben. Halte das als Abhängigkeit fest. Unabhängigkeit bedeutet, dass die benötigte Umgebung verständlich und portierbar ist; es bedeutet nicht zwingend, dass jede Komponente sämtliche Browser-Standardeinstellungen selbst reproduzieren muss.

Wann solltest du das Element beibehalten?

Behalte das mögliche neue Element als Element bei, wenn seine Bedeutung und Implementierung weiterhin vom übergeordneten Element abhängen. Ein Ausrichtungs-Wrapper, der nur in der Werkbank vorkommt, kann viele Nachfahren haben, ohne eine separate öffentliche Identität zu benötigen. Glätte seine BEM-Namen und verbessere seine Organisation, bevor du einen neuen Block einführst.

Umgekehrt kann es sich auch dann lohnen, eine nur einmal verwendete Komponente zu extrahieren, wenn ihre interne Zuständigkeit erheblich ist und ihre Abhängigkeitsgrenze klar ist. Betrachte Wiederverwendung als unterstützenden Hinweis, nicht als erforderliche Anzahl. In dieser Übung erleichtert die zweite Platzierung die Untersuchung der Grenze; sie begründet keine allgemeingültige Regel, nach der ein Element zweimal verwendet werden muss.

Überdenke auch eine Extraktion, bei der sich host-spezifische Varianten ansammeln. Namen wie shape-tile--inside-workbench deuten darauf hin, dass die Platzierung Teil der Komponentenschnittstelle wird. Frage zuerst, ob der Unterschied zu workbench__preview gehört. Verwende eine Komponentenvariante nur für einen Unterschied, den du mit Begriffen der Komponente selbst erklären kannst.

Ändert modernes CSS-Scoping die Entscheidung?

Die Regel @scope kann begrenzen, wo die darin enthaltenen Selektoren greifen, und so die Verwaltung von Selektoren innerhalb eines Dokument-Teilbaums erleichtern. Laut MDN ist sie derzeit als Baseline 2026 eingestuft und seit März 2026 in aktuellen Browserversionen verfügbar; ältere Geräte oder Browser werden möglicherweise nicht unterstützt. Gehe nicht davon aus, dass jede Mac-Installation sie unterstützt. CSS-At-Regel @scope

Die bereitgestellte Übung verwendet gewöhnliche Klassenselektoren und benötigt @scope nicht. Wenn du Browser ohne Scoping unterstützt, sollten die wesentlichen Komponentenstile in diesen Regeln bleiben. Scoping kann die Formulierung einer Grenze verbessern; die Entscheidung über die Zuständigkeit erfordert aber weiterhin eine klare Beschreibung des Zwecks, der Abhängigkeiten und der Platzierung der Komponente.

Extrahiere das komplexe Element, wenn du seinen Zweck und seine interne Implementierung gemeinsam verschieben, das umgebende Layout dem Host überlassen und das Ergebnis in einem anderen Kontext zeigen kannst. Wenn diese Zuständigkeiten weiterhin miteinander verknüpft sind, behalte das Element bei, bis sie geklärt sind; ein kürzerer Klassenname allein schließt die Umstrukturierung nicht ab.

Quellen