Flat Structure

In BEM, we try to avoid selector nesting in CSS.

Bad:

.card .card__title { font-size: 20px; }

This increases specificity and hinders reuse.

Good:

.card__title { font-size: 20px; }

That's it! The class is already unique (thanks to card prefix), so we don't need to clarify that the title is inside the card. This makes CSS fast and light.

Tip: Keep your CSS as " flat " as possible. Ideal BEM selector consists of just one class.