What is BEM methodology?

Every developer will tell you that maintaining consistency in a project is not that easy. And, when your code does not follow any standard or convention, it is even worse. The aim of this tutorial is to teach you how to adopt a methodology called BEM.

BEM

B.E.M is an abbreviation that stands for Block, Element, Modifier. It’s a naming convention for classes in HTML and CSS developed by the people at Yandex. The primary goal of this methodology is to facilitate a team to better understand the relationship between HTML and CSS in their projects.

A block is an independent entity that represents a piece of UI on a page, e.g., button, navigation, etc.

An element is a child item of a block that is tied to it semantically and functionally, e.g., list-item and header title

Note: element classes are denoted by two underscores following the name of the block: .btn__text {}.

• A Modifier is a flag set on a block or an element in order to change the appearance or behavior, e.g.,: disabled, fixed, etc.

Note: modifier classes are denoted by appending two hyphens to the name of the block: btn--big{}.

All put together, this is how a BEM-like CSS might look:

/* Standalone entity */
.btn {}

/* Child item that depends upon the block */ 
.btn__text {}

/* Flag that changes the style of a particular block or element */
.btn--orange {} 
.btn--big {}

Code

Let’s try to implement this educative.io page following what we’ve just learned.

Note: In the widget below you’ll see 3 tabs: output, HTML, and CSS. Feel free to modify the code as you want – I will just be doing the minimalistic style.

I’d say that BEM is a great solution for building and maintaining a codebase so that everyone on the team has a clear understanding of how things can be updated.