BEM - Block__Element–Modifier.

BEM is a modular solution for writing CSS to large projects. Since BEM is just a conjunct of concepts about how to naming the class, we can only see the real benefit of using it in large codebases.

The goal is to create extendable and reusable interface components. This methodology helps maintain a large codebase organization and avoid the nightmare of change one CSS in one specific area and breaking the other.

Looking through the concept of each letter:

Block: An entity that is meaningful on its own, for example:

.card

Element: A part of a block that has no standalone meaning and is semantically tied to its block:

.card__picture
.card__title
.card__descriptiom
.card__button

Modifier: A flag on a block or element. Used to change appearance or behavior.

.card__button--active

Summary of great content about it:

• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
• https://en.bem.info/