BEM

Block, Element, Modifier (BEM) ist ein Konzept, mithilfe von Namenskonventionen ein einfacheres CSS (auf Kosten eines aufgeblähten HTML-Quelltextes) zu erstellen.

Konzept

Das HTML-Dokument wird in mehrere Bereiche aufgeteilt, die sogenannten Blöcke. Blöcke können weitere Bereiche enthalten, die Elemente genannt werden. Um kleinere Unterschiede zwischen Elementen deutlich zu machen, werden Modifier verwendet. Alle diese Bestandteile werden einer oder mehreren Klassen zugeordnet.

Namenskonvention

.block__element--modifier {
 
} 

.block--modifier {

}

Beispiel

<article class="article article--cover">
  <h1 class="article__heading article__heading--cover">Doping: Ben Johnson täuscht die ganze Welt</h1>
  <p class="article__teaser">Ben Johnson, der kanadische …</p>
  <section>
    <h2>Seoul 1988</h2>
    <p>Am 24. September 1988 gelang Ben Johnson ein unglaublicher …</p>
    <p>2 Tage später wurde in seinem Urin …</p>
    <figure>
      <img src="…" alt="">
      <figcaption>Entwicklung des 100m-Weltrekords der Herren</figcaption>
    </figure>
  </section>
  <section>
    <h2>Comeback und Comeback</h2>
    <p>Nach seiner vierjährigen Sperre …</p>
    <p>In Montreal wurde er erneut positiv auf …</p>
  </section>
</article>

.article {
  /* block */
}
.article--cover {
  /* block-modifier */
}
.article__heading {
  /* element */
}
.article__heading--cover {
  /* element-modifier */
}

Vor- und Nachteile

Alle CSS-Selektoren bestehen aus einer Klasse und haben deshalb dieselbe Spezifität. Allerdings muss jedes HTML-Element, das gestylt werden soll, einer Klasse zugeordnet werden. Zudem werden die Klassenbezeichner der Blöcke in den Elementen und Modifiern wiederholt.

Weblinks

• en.bem.info (offizielle Seite)
• praegnanz.de: BEM für Späteinsteiger