CSS BEM Naming Convention
What is BEM?
BEM stands for Block, Element, Modifier — a naming convention that makes CSS classes self-explanatory and conflict-free.
Structure
.block { }
.block__element { }
.block--modifier { }
.block__element--modifier { }
Example
HTML
<style>
.card { }
.card__title { font-size: 18px; }
.card__content { padding: 15px; }
.card--highlighted { border: 2px solid gold; }
</style>
<div class="card card--highlighted">
<h3 class="card__title">Title</h3>
<div class="card__content">Content</div>
</div>
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 |
❓ 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.