On this page
CSS Architecture & BEM
CSS Architecture & BEM
Good CSS architecture is what separates a stylesheet that scales cleanly from one that collapses into specificity wars after a few months. This guide covers BEM (Block, Element, Modifier), the most widely used CSS naming convention, along with broader architectural principles for building maintainable, conflict-free CSS.
Why CSS Architecture Matters
As projects grow, CSS without structure becomes hard to maintain — class names collide, specificity gets out of control, and developers resort to !important just to override styles. A solid CSS architecture prevents this by giving every class a predictable, reusable naming pattern.
1. What Is BEM?
BEM stands for Block, Element, Modifier. It's a naming convention that makes relationships between HTML and CSS explicit just by reading the class name.
| Part | Meaning | Syntax |
|---|---|---|
| Block | A standalone, reusable component | .card |
| Element | A part of a block that has no standalone meaning | .card__title |
| Modifier | A variation in appearance or behavior | .card--featured |
2. BEM Example Breakdown
A product card built with BEM might use .card, .card__image, .card__title, and .card--highlighted — every class name tells you exactly where it belongs in the component tree.
3. Benefits of BEM
| Benefit | Why It Helps |
|---|---|
| Low specificity | All BEM selectors are single classes, avoiding nested selector wars |
| Self-documenting | Class names describe structure and purpose without reading the HTML |
| No naming collisions | Block-scoped names prevent one component's styles from leaking into another |
| Easy refactoring | Components can be moved or reused without breaking styles |
4. Other CSS Architecture Methodologies
| Methodology | Core Idea |
|---|---|
| OOCSS (Object-Oriented CSS) | Separate structure from skin; reuse visual patterns across components |
| SMACSS | Categorizes CSS into Base, Layout, Module, State, and Theme rules |
| Utility-First (e.g. Tailwind) | Compose designs from small, single-purpose utility classes instead of custom components |
| ITCSS | Organizes CSS by specificity layers, from generic to explicit |
5. BEM Naming Rules
- Use double underscores (
__) to separate block and element - Use double hyphens (
--) to separate block/element and modifier - Never nest BEM selectors with descendant combinators in CSS — keep every class flat
- Avoid modifying an element's class based on a parent block's modifier in CSS; let HTML carry that relationship
6. Common BEM Mistakes
| Mistake | Fix |
|---|---|
| Nesting elements like .card__header__title | Elements shouldn't be nested — use .card__title directly |
| Using BEM with deep descendant selectors | Keep selectors flat; avoid .card .card__title in CSS |
| Mixing BEM with utility classes inconsistently | Decide on one primary methodology per project for consistency |
Try It Yourself
Practice writing BEM-structured CSS with the live examples below.
Press Run to execute.
Press Run to execute.
The CSS below uses nested selectors and generic class names. Refactor the HTML and CSS to follow proper BEM naming conventions for a 'nav' block with 'nav-item' elements and an 'active' modifier.
Press Run to execute.
Show expected output
HTML and CSS using .nav, .nav__item, and .nav__item--active class names with flat, non-nested selectors.This is a self-check — compare your result with the expected output above.
Was this page helpful?