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.
Die Methodologie wurde bei Yandex entwickelt, und bietet eine systematische Namenskonvention, die Spezifitätskämpfe vermeidet, indem die Selektoren flach gehalten werden. Jedes Element, das gestaltet wird, erhält einen eigenen Klassennamen.
- 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
Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Design + CodeSchulungen 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.
Schulung + Beratung