Erklärung

BEM steht für »Block, Element, Modifier« (.block__element--modifier{}) und ist ein Konzept zur Benennung von CSS-Selektoren. Der Vorteil des Konzepts besteht darin, dass Entwickler anhand des Namens die Funktion eines CSS-Selektors erkennen können.

  • Der .block stellt die erste und gröbste Abstraktionsebene dar
  • An zweiter Stelle steht mit .block__element das Kind-Element des Blocks. Es hilft den .block zu gestalten
  • Der .block--modifier wird für Abwandlungen des Blocks verwendet

Anhand zweier Beispiele wird das Prinzip etwas deutlicher:



.site-sidebar {} /* Block */

.site-sidebar__box {} /* Element */

.site-sidebar__box--news {} /* Modifier */



.page-header {} /* Block */

.page-header--fullheight {} /* Modifier */

.page-header__title {} /* Element */

.page-header__subtitle {} /* Element */

.page-header__subtitle-minor {} /* Modifier */

Links

Ihr Kommentar zu dieser Frage

Ihr Kommentar zu dieser Frage

Bei Fragen, Anregungen oder Kritik zu dieser Frage, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.