BEM Methodology: Block Element Modifier
Name CSS classes with the Block__Element--Modifier pattern to create self-documenting, low-specificity, reusable component styles.
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>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