What is BEM?

Developed by Yandex, BEM (Block, Element, Modifier) methodology is a popular CSS naming convention. BEM is adopted widely and very helpful when writing CSS classes that are easy to read, maintain and scale.

The fundamental principles of BEM are straightforward. However, there are a few issues developers can avoid when using BEM methodology. This article provides an overview of BEM, identifies the common issues when applying it, and how to resolve them.

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks.BEM

How BEM works

The three parts that form a BEM class name are:

  1. Block
  2. Element
  3. Modifier

Block

The topmost parent of a component is defined as a Block. The Block describes the purpose, i.e. Header, Menu, Button, etc.

Blocks can be nested inside one another and there’s no maximum level of nesting specified.

Block

Element

Element is a child of block. It describes the purpose: an __item, __text. Element name is always preceded by the block name and separated by double underscores.

Element

Just like Blocks, Elements can be nested inside each other. Any number of Elements can be nested. However, they shouldn't define a hierarchy. Element is always part of the block. It shouldn't be used outside of it.

Element part of block

In addition, Element is an optional component. Not all blocks need an Element.

Element optional
Enjoying this article? Sign up to our newsletter

Modifier

Modifier describes the behaviour, state or the appearance of a Block or Element i.e. what type, colour, size? Is it focused? Disabled?

Modifier

The Modifier name is always preceded by the Block or Element name and separated by double hyphens. Class names should adhere to the pattern of separation by a hyphen when 'two-words' describe a component.

Common issues and how to avoid them

  • Confusion over Blocks and Elements: Use Block if a component can be used in isolation. Without being dependent on another component, it should be declared as a Block. Use Element if a component can't be used in isolation and is dependant on other components
  • Incorrect Block names: Ensure Blocks are named correctly
  • Deeply nested Elements in a hierarchical pattern: Nesting of Elements is acceptable but they shouldn't establish a hierarchy. All nested Elements should be on the same level 
  • Using Modifiers as Blocks: Modifiers don't replace a Block or an Element. Therefore they shouldn't be used as a standalone class. They must be preceded by the parent Block or Element
  • Creating too many Elements: If too many Elements are created for an application it can become difficult to keep track of it. There's nothing wrong with breaking the application down into two components
  • Cross components: If there are two Blocks, a modal and a button with a Button Block nested inside a Modal Block, the button functions the same way as if it were a standalone button. Together with the existing styles of the button, the button inside the modal functions in a unique way. This approach can become complex and you might find yourself using !IMPORTANT to override some styles. To overcome this, use Mixes to define the Element before its base Block and Modifier classes. This avoids any overrides and makes the component unique to a particular Block. When nesting like this be aware that you can't reuse the mixed Element elsewhere except within its parent Block. And you shouldn't use it as a Block to create more nested Elements

Our development team are always looking at new technologies and for innovative ways to improve the development process and user experience. We work on exciting design and build projects often on CMS like Sitecore.