BEM

Overview

BEM methodology is used as one of the foundation concepts for our Design System. It's simplicity makes your code easier to read and understand, so large groups can work on it together. Used alongside Atomic Design principles and SASS, it creates a robust naming convention and codebase

Highlights

• Block
• Element
• Modifier

Block

Standalone elements that have a meaning of its own. They can be nested in other blocks, but they remain to have their own entity and meaning.

Block names consist of latin letters, digits or dashes (acting as spaces). Try to keep it concise, short but self-explanatory.

<!-- Example 1 -->
<header class=' header '>...</header>

<!-- Example 2 -->
<div class='hero'>...</div>

<!-- Example 3 -->
<div class='call-to-action'>...</div>

Element

This represents the bits that conform the block. They don't have meaning on their own.

Their name consist of latin letters, digits or dashes (acting as spaces), preceded by the block name and two underscores.

<!-- Example 1 -->
<header class='header'>
  <ul class='header__list'>
  ...
  </ul>
</header>

<!-- Example 2 -->
<div class='hero'>
  <h1 class='hero__title'>...</h1>
</div>

<!-- Example 3 -->
<div class='call-to-action'>
  <a class='call-to-action__button'>...</a>
</div>

Modifier

Flags for both blocks or elements that change their appearance, state or behavior.

The name consist on the name of the block or element followed by a double dash, and the name of the modifier itself in latin letters, digits or dashes (acting as spaces).

<!-- Example 1 -->
<header class='header header--dark'>
  <ul class='header__list'>
  ...
  </ul>
</header>

<!-- Example 2 -->
<div class='hero'>
  <h1 class='hero__title hero__title--big'>...</h1>
</div>

<!-- Example 3 -->
<div class='call-to-action'>
  <a class='call-to-action__button call-to-action__button--red'>...</a>
</div>