CSS Architecture Pt. 2: Block Element Modifier (BEM)

A breakdown of the BEM naming methodology - a systematic way to structure CSS classes for clarity, scalability, and team collaboration.

Originally written by Carl Mills · January 6, 2018

What Is BEM?

BEM stands for Block Element Modifier. It's a CSS naming convention designed to make codebases easier to understand and maintain. BEM brings order to class naming so that developers can instantly recognise relationships between components.

The Naming Convention

The BEM convention structures class names to represent a clear hierarchy of components. The format is: 

.block {}             /* parent/root component */
.block__element {}    /* child element within the block */
.block--modifier {}   /* variant or altered version of the block */

Examples: 

.btn, .btn__icon, .btn--blue
.navbar, .navbar__logo, .navbar--small
.adblockerquery, .adblockerquery__btn, .adblockerquery--big

The double underscore __ separates an element from its block, and the double hyphen -- defines a modifier - ensuring that each class remains meaningful and predictable.

Why BEM Works

BEM prevents confusion and duplication. By reading a class like .navbar__logo, developers instantly know it's part of the .navbar block. Similarly, .navbar--small indicates a specific variation of that component.

For example: 

.shopBasket__removeItem

This makes it immediately clear that the class refers to a specific element (remove item) within the shop basket block.

Best Practices

  • Keep naming consistent - follow the block/element/modifier structure strictly.
  • Don't mix components - e.g. avoid combining .btn--blue with .navbar.
  • Use descriptive names - names should reflect their purpose and role, not their appearance.
  • Prevent duplication - use existing blocks and elements before creating new ones.

Combining BEM with ITCSS

BEM can work alongside the ITCSS methodology. ITCSS defines where styles live in the architecture, while BEM defines how they're named and structured. 

.o-media {}          /* "Objects" layer in ITCSS */
.c-user__photo {}    /* "Components" layer in ITCSS */

Combining ITCSS's layered approach with BEM's naming conventions gives developers a clean, scalable foundation for large, collaborative projects.

Optimising CSS for Scale

BEM helps developers quickly interpret and modify CSS, while ITCSS streamlines its structure. Together, they produce maintainable, efficient, and collaborative front-end systems.

Return to ITCSS Architecture Overview →