Was bedeutet BEM (Block, Element, Modifier)?

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

• MindBEMding – getting your head ‚round BEM syntax