Technology

What is BEM 101?

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS

Why use it?

  • We can easily see which modifiers and children that already exist
  • We are reading the markup instead of CSS
  • We will be able to quickly get an idea of which element depends on another
  • Designers and developers can consistently name components for easier communication between team members

How to use it?

In this CSS methodology a block is a top-level abstraction of a new component, for example a button: .btn { }. This block should be thought of as a parent.
Child items, or elements, can be placed inside and these are denoted by two underscores following the name of the block like .btn__price { }.

/* Block component (covers all elements) */
.product {}

/* Element that depends upon the block (the element under the element) */
.product__heading {}
.product__price {}
.product__btn {}

/* Modifier that changes the style of the block (the buttons that is diffrent than the rest) */
.btn--orange {}
.btn--big {}
<article class="product">
<h2 class="product__heading">Pants</h2>
<p class="product__price">$9.99</p>
<button class="product__btn btn--orange btn--big">Buy now</button>
</article>