BEM will make you happy

BEM (which stands for Block-Element-Modifier) is a standard in the world of CSS and is immensely useful for writing CSS that is easier to read, understand and scale.

Why should I use it?

When working with BEM, the main benefits are two:

• It is easy to assimilate.
• Creates a scalable structure easy to maintain.

What is this about BEM?

A BEM class name is differentiated by having three parts:

[block]__[element]--[modifier]

1- Block: the most external parent element of the component is defined as the block. We could say that this class contains the most generic and reusable features.

2- Element: Within the component there may be one or more elements called elements. The element adds new features to the block. Without overwriting any property at any time.