BEM — Complete Guide

BEM — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.

8 min read Updated 8/21/2026

On this page

CSS Tutorial · Lesson 51 of 100

BEM

Foundations & Layout ✓ → Responsive & Motion ✓ → Architecture & Perf → Projects

Architecture & Perf · 3 — Scale · ~15 min read · CSS — Architecture

1. Introduction

Level up: BEM. Think architecture, performance, and maintainable design systems.

BEM (Block Element Modifier) names classes as block__element--modifier — e.g. card__title--large. Keeps styles scoped and readable without deep nesting.

2. Real-world story

E-commerce team shares BEM classes across React and static pages.

Outcome: Predictable class names simplify QA selectors.

3. Why it matters

StyleVerse component library uses BEM so banking card variants do not leak styles globally.

4. Visual understanding

Read this diagram — the mental model for BEM.

tokens (color, space, type)
   → components (.btn, .card)
   → patterns (forms, nav)
   → pages
BEM/ITCSS/Tailwind = naming & layering systems

5. Key concepts (easy words)

Idea	Meaning
What	BEM (Block Element Modifier) names classes as block__element--modifier — e.g. card__title--large. Keeps styles scoped and readable without deep nesting.
Remember	Block = standalone component. Element = part of block with __. Modifier = variant with --.
Architecture tip	Agree on naming/tokens before scaling the team.

6. How it works

Block product-card wraps element title and price. Modifier --featured adds highlight border for promoted SKU.
Block = standalone component.
Element = part of block with __.
Check the result in DevTools → Computed and the box model overlay.

7. Choose wisely

Option	Notes
Do	Practice BEM on a small StyleVerse card
Avoid	Copying huge frameworks before learning core CSS

8. Try this example

Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.

.product-card { padding: 16px; border: 1px solid #e0e0e0; }
.product-card__title { font-weight: 600; margin-bottom: 8px; }
.product-card__price { color: #2874f0; }
.product-card--featured { border-color: #2874f0; box-shadow: 0 4px 12px rgba(40,116,240,0.15); }

Line walkthrough

Code	What it means
`.product-card { padding: 16px; border: 1px solid #e0e0e0; }`	Selector — picks which elements get these declarations.
`.product-card__title { font-weight: 600; margin-bottom: 8px; }`	Selector — picks which elements get these declarations.
`.product-card__price { color: #2874f0; }`	Selector — picks which elements get these declarations.
`.product-card--featured { border-color: #2874f0; box-shadow: 0 4px 12px rgba(40,116,240,0.15); }`	Selector — picks which elements get these declarations.

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

Result

9. Another real-world angle

10. Best practices checklist

Prefer classes over ids for reusable StyleVerse components.
Use design tokens (CSS variables) for color and spacing.
Mobile-first media queries; test keyboard focus.
Keep specificity low — avoid !important except rare overrides.
Animate transform/opacity when you can; respect prefers-reduced-motion.

11. Common mistakes

Deep selectors like .card .title breaking BEM isolation.
Modifier without block base class on same element.

12. Practice in the browser

Name HTML classes following block__element--modifier.
Avoid nesting selectors beyond one block in CSS.
Document blocks in Storybook or style guide.
Do not chain blocks — compose with extra classes instead.

Experiments

Add product-card__badge--sale modifier in red.
Create product-card--compact with less padding.

13. FAQ

Where should I put CSS for BEM?

Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.

Why is my rule not applying?

Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.

Flexbox or Grid for this?

Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.

14. Interview questions

Explain BEM simply.

BEM (Block Element Modifier) names classes as block__element--modifier — e.g. card__title--large. Keeps styles scoped and readable without deep nesting.