BEM Methodology: Block Element Modifier
Name CSS classes with the Block__Element--Modifier pattern to create self-documenting, low-specificity, reusable component styles.
BEM Methodology: Block Element Modifier is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is BEM?
BEM (Block, Element, Modifier) is a CSS naming convention that makes styles predictable, reusable, and conflict-free. By encoding component structure in class names, it eliminates specificity wars and accidental style collisions.
Blocks — Standalone Components
A Block is an independent, reusable component: card, button, nav. The class name is the block name, written in lowercase with hyphens.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elements — Parts of a Block
An Element is a part of a Block that has no meaning on its own. Use double underscores: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modifiers — Variants and States
A Modifier changes the appearance or behaviour of a Block or Element. Use double hyphens: block--modifier or block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>BEM CSS Rules
BEM classes have low, equal specificity (one class each). This makes styles easy to override. Never use IDs or nested element selectors — they increase specificity unpredictably.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM with Sass
Sass & parent selector makes writing BEM less verbose. The compiled CSS is identical to plain BEM.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}When to Create a New Block
Create a new Block when the component can stand alone and be reused in different contexts. Create an Element when the piece only makes sense inside one specific Block.
BEM Avoids Nesting
BEM discourages deep nesting in HTML and CSS. An element inside an element is still block__element, not block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM and JavaScript
Use a separate JS-specific class for behaviour hooks: js- prefix. This decouples styling and scripting — renaming a BEM class won't break JavaScript behaviour.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Mixing BEM Blocks
One element can have multiple block classes for context-specific styling without coupling the blocks.
<button class="btn btn--primary form__submit">Submit</button>BEM Limitations
Class names can get long. BEM works best for large teams and design systems where global style consistency matters. For component frameworks (React/Vue) with scoped styles, BEM's namespace benefits are less critical.
Quick Check
In BEM, what does card__title--truncated represent?
Recap: BEM
Block: standalone component. Element (double underscore __): part of a block. Modifier (double hyphen --): variant or state. Low, equal specificity. Avoid ID selectors and deep nesting. Use js- prefix for JavaScript hooks. Sass & makes BEM less verbose. Excellent for large teams and design systems.
Frequently asked questions
Is the “BEM Methodology: Block Element Modifier” lesson free?
Yes — the full text of “BEM Methodology: Block Element Modifier” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “BEM Methodology: Block Element Modifier”?
Name CSS classes with the Block__Element--Modifier pattern to create self-documenting, low-specificity, reusable component styles. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “BEM Methodology: Block Element Modifier” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- BEM Methodology: Block Element Modifier
- CSS Modules: Scoped Class Names
- CSS-in-JS: Styled-components and Emotion
- Tailwind CSS Utility-First Approach