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 */
Feedback & Ergänzungen – Schreibe einen Kommentar
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 →