BEM
Block - Element - Modifier
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.
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 {}
