Block Element Modifier

It is popular naming convention for Classes in HTML and CSS. It was invented at Yandex to develop sites that should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

Block

It is an independent component in HTML that has its own meaning and can be reused. It is more of like a parent element.

Examples: <header>, <nav>, <form> etc.

<header class="header">

<nav class="nav"></nav>

</header>

Element

Elements are the child element of the Block component. It is mostly the text part inside the block. Block and Elements are seperated by 2 double underscores (block__element).

Examples: <input>, <h1>, <button> etc.

<header class="header">

<h1 class="header__title"> Introduction </h1>

</header>

Modifier

As the name suggests it modify the appearance, state, behaviour of elements. Elements and Modifiers are seperated by single undersocre (elements_modifiers)

Examples: <disabled>, <color>, <active> etc.

<form class="form">

<input type="text" class="form__name_disabled" disabled>

</form>

NOTE: Some places you will find elements and modifiers are separated using a single underscore (element--modifiers).

Rules <block-name__element-name_modifier-name>

1. Names are written in lowercase Latin letters.

2. Words are seperated by a hyphen (search-form).

3. The element name is seperated from the block name by a double underscore (header__title).

4. The element name is seperated from the modifier name by a single underscore (form__input_disabled).

A double hyphen inside a comment (--) may cause an error during validation of an HTML document. So it is mostly avoided.

References

BEM Methodology

Contact

• Twitter