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 und Ergänzungen
Kommentar zu dieser Seite
Antworten abbrechen
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 →Das Team von kulturbanause veröffentlich regelmäßig neue Inhalte zum den Themen Design und Development.
Du willst nichts verpassen? Dann abonniere jetzt unseren Newsletter, folge uns auf Facebook und Twitter oder abonniere einen unserer RSS-Feeds.
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: