What is BEM?

BEM is a popular approach to front-end development that was originally developed by Yandex Technologies as a way to organize code through unified, semantic classnames. The BEM naming convention aims to achieve the following goals: faster development; increased longevity and maintainability of code; and efficient code sharing.

BEM stands for BLOCK, ELEMENT, MODIFIER.

BLOCKS are independent, reusable “parent” entities that have meaning on their own. Think of these as the building blocks of a page. Examples include: header, footer, navigation, image, etc. Blocks can contain other blocks, and they can also contain elements.

The markup: Blocks should have a unique CSS class name, or “block name” that can be later used in a CSS rule. Block names may include letters, digits, and dashes. For example:

<header class="mainHeader">
</header>

ELEMENTS are sub-items or “children” that are associated with the block item. They perform a specific function, but are dependent on the block for semantic meaning. For example: navigation item, header title, image description, input field.

The markup: BEM aims to minimize cascading selectors. For this reason, CSS class names for elements should include the block name and the element name. The start of the element name is indicated by two underscores, which indicate that the element is a child of the block. Like block names, element names may also include letters, digits, and dashes.

<header class="mainHeader">
     <h1 class="mainHeader__title">PAGE TITLE</h1>
</header>

Here is an example of a simple page layout. The blue rectangles indicate blocks. In this case, there is a header block, a navigation block, and a button block.

The pink rectangles indicate elements. There is a main title element, a sub title element, and navigation item elements.

MODIFIERS are additional classes that can can be added to blocks or elements to modify their appearance or behaviour to something other than the default state. For example, they can be used to change colour, size, alignment, etc. Modifiers are useful when the elements or blocks share many of the same styles but only need a small change.

The markup: Add the modifier class to the block or element that you would like to affect. The beginning of the modifier name is indicated with two dashes. If necessary, multiple modifiers may be added to the same block or element.

<footer class="footer">
   <ul class="footer__links">
      <li><a href="...">Link1</a></li>
      <li><a href="...">Link2</a></li>
      <li><a href="...">Link3</a></li>
      <li class="footer__Links--btn"><a href="...">Click!</a></li>
   </ul>
</footer>