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 */

Feedback und Ergänzungen

Kommentar zu dieser Seite

Ihr habt Anregungen, Ergänzungen, einen Fehler gefunden oder dieser Inhalt ist nicht mehr aktuell? Dann freuen wir uns über einen Kommentar. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: