BEM (Block Element Modifier) ist eine Namensmethodik für CSS und SCSS, entwickelt vom Yandex Entwicklungsteam. Klassennamen folgen der Struktur block__element--modifier, wobei Element und Modifier optional sind: Ein Block ist eine eigenständige Komponente, ein Element ein Teil eines Blocks ohne eigene Bedeutung, ein Modifier ein Kennzeichen, das Aussehen oder Verhalten ändert. Flache Selektoren und explizite Namen verhindern Spezifitätskriege und Namenskonflikte in großen Codebasen.

BEM Methodology

Details
Vollständiger Name

Block Element Modifier (BEM) (S)CSS-Methodologie

Kernkonzepte:

Motivation

CSS-Spezifitätskriege, Namenskonflikte und Stylesheet-Wartbarkeitsprobleme in großen Codebasen lösen

Block

Eigenständige Komponente, die für sich allein sinnvoll ist (z.B. menu, button, header)

Element

Teil eines Blocks ohne eigenständige Bedeutung (z.B. menuitem, buttonicon)

Modifier

Kennzeichen auf Blöcken oder Elementen, das Aussehen oder Verhalten ändert (z.B. button—​disabled, menu__item—​active)

Namenskonvention

block__element—​modifier Struktur

Unabhängigkeit

Blöcke sind eigenständig und wiederverwendbar

Kein Cascading

Tiefe CSS-Selektoren vermeiden, flache Struktur verwenden

Explizite Beziehungen

Klare Eltern-Kind-Beziehungen durch Benennung

Wiederverwendbarkeit

Komponenten können überall im Projekt verschoben werden

Mix

Kombination mehrerer BEM-Entitäten auf einem einzigen DOM-Knoten

Dateistruktur

Oft gepaart mit komponentenbasierter Dateiorganisation

Benennungsbeispiele:

  • Block: .search-form

  • Element: .search-forminput, .search-formbutton

  • Modifier: .search-form—​compact, .search-form__button—​disabled

    Schlüsselvertreter

    Yandex Entwicklungsteam

Wann zu verwenden:

  • Großangelegte Webanwendungen mit vielen Komponenten

  • Teamprojekte, die konsistente (S)CSS-Namenskonventionen erfordern

  • Wenn (S)CSS-Wartbarkeit und Skalierbarkeit Prioritäten sind

  • Projekte, bei denen Entwickler die (S)CSS-Struktur schnell verstehen müssen

  • Komponentenbasierte Architekturen (React, Vue, Angular)

Aktueller Stand:

  • Die Definition auf getbem.com und bem.info ist stabil und weiterhin korrekt — BEM selbst ist eine fertige Methodik

  • Die Praxis hat sich verschoben: State of CSS 2024 zeigt Tailwind CSS "weit vor den traditionelleren Konkurrenten", und die Umfrage erfasst Naming-Methodologien gar nicht mehr wie noch 2020; CSS Modules, CSS-in-JS und natives Scoping/Nesting/Cascade Layers lösen per Plattform das Global-Namespace-Problem, das BEM per Konvention löste