Make BEM

BEM (Block, Element, Modifier) is a very useful methodology for writing maintainable, scalable CSS.

What is BEM (at a high level)

• Block — an independent, reusable component. It should make sense on its own (e.g. menu, card, form).
• Element — a part of a block that has no standalone meaning outside that block (e.g. menu__item, card__header).
• Modifier — a flag that changes appearance, behavior, or state of a block or element (e.g. menu--horizontal, card__header--dark).

The BEM website gives the naming rules:

• Block names: lowercase letters, digits, dashes (e.g. block-name)
• Element: block__elem-name (double underscore)
• Modifier: block--modifier or block__elem--modifier (double dash)

Simple example

Here’s a small example:

<div class="card card--featured">
  <h2 class="card__title">Title</h2>
  <p class="card__text">Some text content.</p>
  <button class="card__button card__button--disabled">Click me</button>
</div>

And CSS:

.card { /* base block styling */ }

.card--featured {
  border: 2px solid gold;
}

.card__title {
  font-size: 1.5em;
}

.card__text {
  color: #333;
}

.card__button {
  padding: 0.5em 1em;
}

.card__button--disabled {
  opacity: 0.5;
  pointer-events: none;
}

• card is a block.
• card__title, card__text, card__button are elements of the card block.
• card--featured is a block-level modifier.
• card__button--disabled is an element-level modifier.