BEM names CSS classes as Block__Element--Modifier: .card__title--featured. This keeps specificity low, relationships explicit, and styles portable. It is a naming convention — just follow the pattern consistently.
BEM — Block Element Modifier
/* Block — standalone component */
.card { ... }
/* Element — part of block */
.card__title { ... }
.card__body { ... }
.card__image { ... }
/* Modifier — variant */
.card--featured { border: 2px solid gold; }
.card--dark { background: #1e293b; }
.card__title--large { font-size: 2rem; }
/* HTML */
<div class="card card--featured">
<h2 class="card__title card__title--large">...</h2>
</div>