Do you know the BEM Methodology in CSS?

BEM stands for Block Element Modifier, which consists of a class naming pattern for HTML markup elements based on the element's structural function rather than its presentation function.

The BEM methodology prioritizes the adoption of 'classes' instead of IDs, as they are reusable. This methodology is used following techniques that facilitate the construction of the code, improving development and agility, reducing maintenance time and helping to preserve the code.

Block

Block is a logically independent component that encapsulates implementation styles, behavior or technologies. The fact that the blocks are independent allows us to easily reuse them.

Element

The element is a part of a block that cannot be used outside of it (for example, items within the menu block).

Modifier

The modifier is a BEM entity that defines the state, appearance and behavior of blocks or elements - identical blocks can look different because of a modifier. The use of this entity is optional.

.main-block {padding: 15px; }
.main-block__article {max-width: 600px; }
.main-block__article--gray-background {background: gray; }