Catalog
method#Software Engineering#Architecture#Delivery

Block Element Modifier (BEM)

BEM is a CSS naming convention and methodology for structured class naming that promotes reusability and predictability.

Block Element Modifier (BEM) is a CSS naming convention and methodology for organizing components.
Established
Medium

Classification

  • Medium
  • Technical
  • Architectural
  • Intermediate

Technical context

Styleguidist or Storybook for documentationCSS linter (e.g., stylelint) with BEM rulesBuild tools (Webpack, Vite) for scoped CSS modules

Principles & goals

Clear separation of block, element and modifier.Predictable, reusable class names instead of context-dependent selectors.Convention over configuration: simple rules instead of project-specific exceptions.
Build
Team, Domain

Use cases & scenarios

Compromises

  • Excessive fragmentation of classes with overly fine block partitioning.
  • Team-wide convention disputes without clear governance.
  • Uncontrolled expansion of modifiers leads to name explosion.
  • Limit modifiers to genuinely variable states.
  • Avoid deeply nested block hierarchies; favor flat structures.
  • Use tooling to validate naming convention (linter, tests).

I/O & resources

  • Design system or style guide
  • List of existing classes and components
  • Build/testing tooling (linter, visual regression)
  • Standardized class naming convention
  • Documented component blocks
  • Reduced styling conflicts

Description

Block Element Modifier (BEM) is a CSS naming convention and methodology for organizing components. It promotes clear, reusable class names and separates structure from state. BEM enables scalable stylesheets, simplifies team collaboration and reduces styling side-effects. It is well suited for modular frontend architectures and long-term maintainability.

✔

  • Improved readability and predictability of styles.
  • Easier reuse of components across projects.
  • Reduced side-effects through explicit class boundaries.

✖

  • Requires discipline in naming; inconsistent application leads to disorder.
  • Can create boilerplate in class names, especially with deep nesting.
  • Not directly compatible with all CSS-in-JS approaches without mapping.

  • Number of unique blocks

    Measures how many independent BEM blocks exist in the codebase.

  • Conflicts from global selectors

    Number of style conflicts attributable to global selectors.

  • Average class name length

    Metric to estimate boilerplate and readability via class name length.

Simple card component

A card block (.card) with elements like .card__title and modifiers like .card--featured.

Navigation bar

Block .nav with elements .nav__item and modifiers for active states .nav__item--active.

Form layout

Form block (.form) with .form__field and state modifiers like .form__field--error.

1

Start: Define minimal BEM rules and communicate them to the team.

2

Pilot: Migrate a critical component and evaluate effects.

3

Rollout: Extend migration, set up linters and add documentation.

⚠️ Technical debt & bottlenecks

  • Old global selectors blocking migration.
  • Incomplete documentation of the applied BEM convention.
  • Missing linter rules to enforce naming convention.
global-cssnaming-complexitytooling
  • Using modifiers to represent pure layout deviations instead of semantic states.
  • Creating block names that follow DOM structure rather than components.
  • Mixing BEM conventions with project-wide global selectors without boundaries.
  • Overly fine-grained blocks lead to many classes and maintenance overhead.
  • Unclear boundary between block and element responsibility.
  • Blindly copying naming patterns from other projects without context adaptation.
Solid CSS knowledgeUnderstanding of frontend component architectureAbility to document and enforce conventions
Modularity and reusabilityAvoidance of global style conflictsPredictable selector hierarchy
  • • Existing legacy styles require gradual migration.
  • • Project-specific exceptions can weaken conventions.
  • • CSS-in-JS patterns require additional mapping strategies.