Abstrakt
Bei großen Auftritten ist es wichtig, sowohl den HTML als auch den CSS Code verständlich zu schreiben. Vor allem für die Arbeit im Team oder bei späteren Erweiterungen ist ein für alle verständlicher Code ein muss.
BEM
BEM sthet für Block, Element und Modifier.
Block
Ein Block steht für sich allein und muss ein eindeutigen, beschreibenden Namen hierfür haben.
Beispiele:
- header
- container
- menu
- checkbox
- input
Element
Ein Element ist immer Teil eines Blocks und kann und darf nicht ohne einen Block verwendet werden. Es ist fest mit dem Block verknüpft.
Beispiele:
- menu item
- list item
- checkbox caption
- header title
Modifier
Ein Modifier ändert das Aussehen eines Blocks oder Elements in bestimmer Weise. Ein Modifier kann auf verschiedene Blöcke und Elemente angewendet werden.
Beispiele:
- disabled
- highlighted
- checked
- fixed
- big
- yellow
Vorteile
Die erzeugten CSS Dateien sind modular und somit wiederverwendbar. Blöcke können auch in anderen Projekten verwendet werden.
Blöcke und Elemente werden zusammen definiert und die CSS Datei wird dadurch strukturiert.
Wird Stylus eingesetzt, dann definiert man jeden Block in dessen Elemente in einer CSS Datei und die Modifier in einer weiteren CSS Datei. Der Code wird dadurch nochmals strukturierter.