Skip to content

BEM Naming

BEM (Block Element Modifier) is the CSS naming methodology used across this project. It keeps styles organised, prevents class name collisions, and makes the relationship between HTML and CSS immediately readable.

<div class="card card--featured">
<h2 class="card__title">Hello</h2>
<button class="card__button card__button--primary">Click</button>
</div>
PartMeaningExample
BlockStandalone component.card
ElementPart of a block.card__title
ModifierVariant of block/element.card--featured

A standalone component that makes sense on its own.

<button class="button">Click me</button>
<div class="card">...</div>
<nav class="navbar">...</nav>

A part of a block — cannot exist without its block.

<div class="card">
<h2 class="card__title">Title</h2>
<p class="card__description">Description</p>
</div>

A variant or state of a block or element.

<div class="card card--featured">...</div>
<button class="button button--primary">Submit</button>
<form class="form form--login">
<input class="form__input form__input--error" />
<button class="form__button form__button--primary">Submit</button>
</form>
<div class="card">
<div class="card__header">
<h2 class="card__header-title">Title</h2>
</div>
</div>

Bad:

<h2 class="title">...</h2>
<button class="btn primary-btn">...</button>
.card h2 { ... } .card__title__text { ... }

Good:

<h2 class="card__title">...</h2>
<button class="button button--primary">...</button>
.card__title { ... } .card__title--large { ... }
  • No conflicts - Prefixes prevent collisions
  • Readable - Class names show relationships
  • Scalable - Easy to add new variants
  • Maintainable - Self-documenting structure