CSS `BEM` Methodology

Write scalable, maintainable, and readable CSS with Block Element Modifier!

What is BEM?

BEM (Block Element Modifier) is a popular CSS naming convention that helps you write modular, reusable, and easy-to-understand styles. It breaks UI components into independent blocks, their child elements, and variations (modifiers).

Block: The standalone component (e.g., card, menu).
Element: A part of the block, separated by __ (e.g., card__title).
Modifier: A variation or state, separated by -- (e.g., card--featured).

BEM Naming Syntax

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

💡 Tip: BEM makes your CSS predictable and avoids selector conflicts in large projects!

Best Practice: Use BEM with utility classes or frameworks for even more scalable CSS.

Interactive Examples

BEM Card Example

Card Title

This is a card description using BEM naming.

<div class="card">
  <h4 class="card__title">Card Title</h4>
  <p class="card__desc">...</p>
  <button class="card__btn">Action</button>
</div>

.card { ... }
.card__title { ... }
.card__desc { ... }
.card__btn { ... }

BEM Modifier Example

Featured Card

This card uses a --featured modifier for a different style.

<div class="card card--featured">
  <h4 class="card__title">Featured Card</h4>
  <p class="card__desc">...</p>
  <button class="card__btn card__btn--primary">Primary Action</button>
</div>

.card--featured { ... }
.card__btn--primary { ... }

Try it: Compare the cards above. The card--featured and card__btn--primary modifiers change the appearance using BEM!