BEM

Block - Element - Modifier

Helen

Pixelschubser

Der Name ist ein Akronym und steht für Block, Modifier, Element; die drei Komponenten, die BEM ausmachen. Nun ist zu Beginn etwas unklar, was eigentlich jede Komponente ist. Am einfachsten kann man dies anhand eines Strichmännchens erklären.

Block   

Das ganze Strichmännchen ist der Block. Es können um es herum noch andere Männchen oder vielleicht Häuser sein, aber das sind eigene Blocks.
Die Klasse könnte dann so aussehen:

Html:

class="stick-man"

CSS:

.stick-man {}

 

Element

Das Strichmännchen ist an sich aufgebaut aus Teilen, die ebenfalls Klassen haben können.
Die Elemente werden vom Block mit zwei Unterstrichen getrennt.

Html:

class="stick-man__arms"

CSS:

.stick-man__arms {}

 

Modifier

Die Modifier sind zuletzt dazu da, die zuvor benannten Komponenten zu verändern.
Ganz links ist das ursprüngliche Strichmännchen zu sehen. Es könnte auf einer Website bspw eine Standardüberschrift sein, oder ein Standardbutton die zwar funktionieren, aber noch nicht sehr schön aussehen.
Man sollte außerdem bei der Vergebung von Klassen bedenken, dass der Block oder das Element auch anderer Stelle noch benutzt werden kann, daher empfiehlt sich eine Klasse, die nur den Block bzw das Element benennt zu vergeben, sowie eine Klasse mit Modifier. 
Der Modifier wird von der vorigen Komponente durch zwei Bindestriche getrennt.

Html:

class="stick-man__head stick-man__head--small"
class="stick-man__head stick-man__head--big"
class="stick-man stick-man--blue"
class="stick-man stick-man--red"

CSS

.stick-man__head {} 
.stick-man__head--small {}
.stick-man__head--big {}
.stick-man {} 
.stick-man--blue {}
.stick-man--purple {}

 

 

Wozu das Ganze?

Nun könnte man behaupten, solange man einheitlich benennt und logische Klassen vergibt, reicht es doch. Das ist zwar nicht unbedingt falsch, aber sobald mehr als eine Person an einem Projekt arbeiten, macht es Sinn ein einheitliches System zu benutzen. Auf diese Weise versteht jede beteiligte Person den Code und kann problemlos Änderungen einbring

Zurück