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.

Quick Reference

<div class="card card--featured">
    <h2 class="card__title">Hello</h2>
    <button class="card__button card__button--primary">Click</button>
</div>

Part	Meaning	Example
Block	Standalone component	.card
Element	Part of a block	.card__title
Modifier	Variant of block/element	.card--featured

The Three Parts

Block

A standalone component that makes sense on its own.

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

Element

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>

Modifier

A variant or state of a block or element.

<div class="card card--featured">...</div>
<button class="button button--primary">Submit</button>

Examples

Form with Modifiers

<form class="form form--login">
    <input class="form__input form__input--error" />
    <button class="form__button form__button--primary">Submit</button>
</form>

Nested Components

<div class="card">
    <div class="card__header">
        <h2 class="card__header-title">Title</h2>
    </div>
</div>

Caution

Only one level of __ allowed. Use meaningful names instead of chaining.

Good vs Bad

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 { ... }

Why BEM?

• No conflicts - Prefixes prevent collisions
• Readable - Class names show relationships
• Scalable - Easy to add new variants
• Maintainable - Self-documenting structure