Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

BEM

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Konzept[Bearbeiten]

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[Bearbeiten]

.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[Bearbeiten]

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[Bearbeiten]