What Is BEM Naming Convention in CSS?
Learn what BEM (Block, Element, Modifier) is, the correct class-naming syntax, and why this convention keeps large CSS codebases organized and scalable.
Expected Interview Answer
BEM (Block, Element, Modifier) is a CSS class-naming convention that structures class names as block__element--modifier, so a component's structure and variants are readable directly from the class name without needing to inspect nested selectors.
A Block is a standalone component (like .card), an Element is a part that only makes sense inside that block, written as block__element (like .card__title), and a Modifier is a variant or state, written as block--modifier or block__element--modifier (like .card--highlighted). Because every class is flat and self-descriptive, BEM avoids deep nested selectors and specificity wars, keeps styles scoped to their component, and makes it obvious from the HTML alone what each class does and belongs to, which scales well on large teams and codebases.
- Flat class names avoid CSS specificity conflicts
- Class names alone reveal component structure and relationships
- Encourages reusable, self-contained components
- Reduces accidental style leakage between unrelated components
- Scales well for large teams working in a shared codebase
AI Mentor Explanation
BEM is like a scorecard's naming system where the team is the block, each player's role like opening-batter is the element written as team__opening-batter, and their current form like team__opening-batter--injured is the modifier. Anyone glancing at the sheet instantly knows which squad a player belongs to, their role, and their current status.
Step-by-Step Explanation
Step 1
Block is the standalone component
A Block is a top-level, reusable component, named plainly like .card or .nav.
Step 2
Element is a part scoped to the block
An Element only makes sense inside its block and is written block__element, like .card__title.
Step 3
Modifier is a variant or state
A Modifier changes appearance or behavior and is written block--modifier or block__element--modifier, like .card--highlighted.
Step 4
Classes stay flat, avoiding nesting
BEM discourages deeply nested selectors like .card .title.highlighted, favoring flat, self-descriptive class names instead.
Step 5
HTML reveals structure without inspecting CSS
Reading class names in the markup alone tells you which block an element belongs to and what state it's in.
What Interviewer Expects
- Can define Block, Element, and Modifier correctly
- Gives the correct double-underscore/double-hyphen syntax
- Explains why BEM avoids CSS specificity conflicts
- Understands BEM keeps components self-contained and reusable
- Can discuss BEM's tradeoffs versus utility-first CSS or CSS Modules
Common Mistakes
- Mixing up single vs double underscores/hyphens in the syntax
- Nesting elements inside elements (e.g., block__element__subelement)
- Applying a modifier class without also keeping the base block/element class
- Believing BEM is a framework rather than a naming convention
Best Answer (HR Friendly)
“BEM is a naming convention for CSS classes that spells out a component's structure directly in its name: Block for the component, Element for a part inside it, and Modifier for a variant. It keeps large stylesheets organized and easy to understand just by reading the class names.”
Code Example
<div class="card card--highlighted">
<h2 class="card__title">Title</h2>
<p class="card__body">Description text</p>
<button class="card__button card__button--disabled">Buy</button>
</div>
/* CSS */
.card { border: 1px solid #ddd; }
.card--highlighted { border-color: gold; }
.card__title { font-weight: bold; }
.card__button--disabled { opacity: 0.5; }Follow-up Questions
- How does BEM compare to utility-first frameworks like Tailwind CSS?
- How does BEM interact with CSS Modules or CSS-in-JS scoping?
- What is the correct syntax for a Block, Element, and Modifier?
- Why does BEM discourage deeply nested descendant selectors?
- How would you name a modifier that applies only to one element within a block?
MCQ Practice
1. What does the 'E' in BEM stand for?
BEM stands for Block, Element, Modifier; Element is a part that only makes sense within its parent Block.
2. What is the correct BEM syntax for an Element?
BEM elements use a double underscore between the block name and the element name, e.g., card__title.
3. What is the correct BEM syntax for a Modifier?
BEM modifiers use a double hyphen, e.g., card--highlighted or card__button--disabled.
Flash Cards
What does BEM stand for? — Block, Element, Modifier — a CSS class-naming convention.
BEM Element syntax? — block__element (double underscore), e.g., card__title.
BEM Modifier syntax? — block--modifier or block__element--modifier (double hyphen), e.g., card--highlighted.
Main benefit of BEM? — Flat, self-descriptive class names that avoid specificity conflicts and reveal component structure.