The BEM methodology🔗

Definition🔗

BEM (Body Element Modifier) is a component based approach that considers each component as a brick that should be able to fit everywhere no matter the context. 🧱 That way you get modular styles and you can add, replace and remove blocks with minimum CSS.

Example🔗

card is a component. It can be placed in various contexts on several pages. Their content can change, but as long as the cards are visually identical, they will get their styles from the same stylesheet (named after their component's name, here card.css).

What's a component : block and elements🔗

Each block is an entity. It can be divided in sections or elements but each of its elements depends upon the base component. If a section is meant to be used independantely, it should become a new block.

Syntax🔗

The base component's name should be as generic and short as possible (e.g., card, link).

Its children's names can be written block__element (e.g., card__image, card__title).

Example🔗

In the example shown here, card would have as children :

an image
a title
some content
tags
a link

Since tags and links are pretty common items they could probably be found elsewhere on the project. They should be fully-fledged components and their styles would be in a dedicated stylesheet.

HTML structure

<div class="card">
    <div class="card__image"></div>
    <h2 class="card__title"></h2>
    <p class="card__content"></p>
    <ul class="tags">
        <li class="tags__item"></li>
        <li class="tags__item"></li>
    </ul>
    <a href="" class="link"></a>
</div>

Card component (card.css)

.card { ... }

.card__image { ... }

.card__title { ... }

.card__content { ... }

Tags component (tags.css)

1
2
3

.tags { ... }

.tags__item { ... }

Link component (link.css)

1	`.link { ... }`

Modifiers of a component🔗

There can be many versions of a component. A version of a component (called modifier) must :

have the same purpose as its base component
be visually similar to its base component

Syntax🔗

The modifier can be written component--modifier

The class component--modifier should only be used to override some of the base components styles, and define the modifier's styles. In your HTML you should always have the base component's class and the modifier's (e.g., class="component component--modifier").

Example🔗

base component and modifiers — Base component and modifiers

In our example, the base component card would have 2 alternative versions. They could be called card--large and card--horizontal.

HTML structure

<div class="card"></div>

<div class="card card--large"></div>

<div class="card card--horizontal"></div>

Card component (card.css)

// base component styles

.card { ... }



// overrides only what's necessary for each modifier

.card--large { ... }

.card--horizontal { ... }

Last update: December 20, 2024