CSS: CSS BEM Naming Convention
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
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>
▶ Example
BEM naming for a navigation component:
CSS
.nav { display: flex; }
.nav__item { padding: 0 15px; }
.nav__link { color: #333; text-decoration: none; }
.nav__link--active { color: #0066cc; font-weight: bold; }
.nav__item--separated { border-left: 1px solid #ccc; }
2. 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:
HTML
<style>
.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.btn--primary { background: #0066cc; color: white; }
.btn--secondary { background: #6c757d; color: white; }
.btn--large { padding: 12px 24px; font-size: 18px; }
.btn__icon { margin-right: 6px; }
</style>
<button class="btn btn--primary btn--large">
<span class="btn__icon">+</span> Add Item
</button>
<button class="btn btn--secondary">Cancel</button>
❓ 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.
