icon-arrow-lefticon-arrow

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

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir sind nicht auf eine Branche festgelegt und arbeiten u.a. mit folgenden Unternehmen erfolgreich zusammen:

ovh-logoaws-logo