BEM ist die Abkürzung für Block, Element und Modifier und bezeichnet eine Form der Namensgebung bei CSS-Klassen. CSS ist zwar eine einfache Gestaltungs- bzw. Formatierungssprache, allerdings besteht die Kunst insbesondere bei umfangreichen Websites darin, für Klassen aussagekräftige Namen zu verwenden und so wiederverwendbar wie möglich zu gestalten.
Bei der BEM-Methode werden Klassen in drei Gruppen aufgeteilt: Blocks sind unabhängige und größere Komponenten, wie z.B. Header oder Formulare. Dementsprechend wäre eine Klassenbenennung wie folgt denkbar: <form class="form">. Elements sind einzelne Komponenten innerhalb dieses Blocks, wie z.B. Buttons, dessen Klasse gemäß BEM lauten könnte: <button class="form__button">. Elements bilden den zweiten Teil des Namens, der mit einem doppelten Unterstrich eingeleitet wird. Modifier Klassen hingegen werden durch einen doppelten Bindestrich eingeleitet und dienen lediglich dem modifizieren eines Elements, z.B: <button class="form__button--disabled">.
Durch diese Schreibweise ist immer sofort erkennbar, um welchen Block, Element oder Modifier es sich handelt. Der größte Vorteil von BEM kommt aber vor allem dann zum Tragen, wenn ein CSS-Präprozessor eingesetzt wird. Bei Präprozessoren lassen sich CSS Anweisungen verschachteln, sodass der Code beim Einsatz der BEM-Methode wesentlich einfacher zu lesen und zu schreiben ist.
