CSS: CSS BEM Naming Convention
Last updated: 2026-10-13
1. What is BEM?
BEM stands for Block, Element, Modifier — a naming convention that makes CSS classes self-explanatory and conflict-free.
(1) Structure
CSS
.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }
▶ Example
▶ Try it Yourself▶ Example
BEM naming for a navigation component:
▶ Try it Yourself2. Why BEM?
| Benefit | Description |
|---|---|
| Self-documenting | Class names explain what they style |
| No conflicts | Unique names prevent style collisions |
| No specificity wars | Flat selectors, no nesting needed |
| Easy maintenance | Change one class without affecting others |
▶ Example
BEM for a button component with variants:
▶ Try it Yourself❓ FAQ
Q BEM class names are too long — what to do?
A Long names are BEM's design trade-off — better long names than style conflicts. You can use shorter naming (like
card-t instead of card__title), but keep it consistent project-wide. Sass nesting can reduce repetition significantly.Q Can
-- and __ be mixed in BEM?A Yes.
block__element--modifier is standard, meaning "an element of a block in a specific state." For example, card__title--highlight means "card's title in highlighted state." Don't reverse the order like block--modifier__element — order matters.Q Is BEM suitable for small projects?
A For small projects with just a few pages, BEM is overkill. Simple class names (
.title, .btn) are enough. But when projects exceed 10 pages or have multiple developers, BEM's value becomes clear.📖 Summary
- BEM is one of the best CSS naming conventions
- Through Block, Element, Modifier structure, CSS classes become self-explanatory, conflict-free, and maintainable
- BEM doesn't require nested selectors — each class is independent, avoiding specificity wars
- Whatever convention you choose, team consistency is most important
📝 Exercises
- Create a "user comment" component using BEM naming: avatar, username, time, comment text, like button.
- Rewrite this CSS in BEM style:
CSS
.profile { ... }
.profile .photo { ... }
.profile .info { ... }
.profile .info .name { ... }
.profile .actions .btn { ... }
- Consider introducing BEM naming in your project — practice with a small module on one page.
