DEV Community

Cover image for Block Element Modifier
Vansh Sharma
Vansh Sharma

Posted on • Updated on • Originally published at vanshsharma.hashnode.dev

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)