suggest change

BEM stands for Blocks, Elements and Modifiers. It’s a methodology initially conceived by Russian tech company Yandex, but which gained quite some traction among American & Western-European web developers as well.

As the same implies, BEM metholology is all about componentization of your HTML and CSS code into three types of components:

Examples are header, container, menu, checkbox & textbox

Examples are menu item, list item, checkbox caption & header title

Examples are disabled, highlighted, checked, fixed, size big & color yellow

The goal of BEM is to keep optimize the readability, maintainability and flexibility of your CSS code. The way to achieve this, is to apply the following rules.

Code example

If you apply BEM to your form elements, your CSS selectors should look something like this:

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

The corresponding HTML should look something like this:

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents