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.

Die Methodologie wurde bei Yandex entwickelt, und bietet eine systematische Namenskonvention, die Spezifitätskämpfe vermeidet, indem die Selektoren flach gehalten werden. Jedes Element, das gestaltet wird, erhält einen eigenen Klassennamen.

• 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 */