DEV Community

Cover image for BEM - Block__Element–Modifier.
Ronaiza Cardoso
Ronaiza Cardoso

Posted on

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

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

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

.card__button--active
Enter fullscreen mode Exit fullscreen mode

Summary of great content about it:

Discussion (0)