Skip to content
Example: A navigation bar, button, or card.Naming: block__element (double underscores)Example: The logo inside a header, or an item inside a list.
Naming: block--modifier or block__element--modifier (double hyphens)Example: A button that is primary vs. secondary, or a card that is highlighted.
A superset of CSS provided by the Sass preprocessor.Uses the .scss file extension.Adds powerful features on top of normal CSS.Must be compiled into CSS before the browser can use it.
CSS
BEM convention
The BEM convention in CSS stands for Block, Element, Modifier. It’s a methodology for writing CSS that makes code more readable, reusable, and maintainable, especially in large projects.
1. Block
A standalone, reusable component that has meaning on its own.
.header { ... }
.button { ... }
A part of a block that has no standalone meaning and is semantically tied to the block.
.header__logo { ... }
.card__title { ... }
3. Modifier
A variation or state of a block or element.
.button--primary { ... }
.card--highlighted { ... }
.card__title--large { ... }
Example in practice:
HTML:
<div class="card card--highlighted">
<h2 class="card__title card__title--large">BEM Example</h2>
<p class="card__text">This is a card using BEM naming.</p>
</div>
CSS:
.card {
border: 1px solid #ccc;
padding: 1rem;
}
.card--highlighted {
border-color: gold;
}
.card__title {
font-size: 1.2rem;
}
.card__title--large {
font-size: 2rem;
}
SCSS (Sassy CSS)
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.