name-badge.css

/* Default variant */
.name-badge {}
.name-badge__name {}
.name-badge__avatar {}
.name-badge__description {}

/* Small variant */
.name-badge--small {}
.name-badge--small .name-badge__name {}
.name-badge--small .name-badge__avatar {}
.name-badge--small .name-badge__description {}

name-badge.html

<!-- Default variant -->
<div clas="name-badge">
  <div class="name-badge__name"></div>
  <img class="name-badge__avatar">
  <div class="name-badge__description"></div>
</div>

<!-- Small variant -->
<div clas="name-badge name-badge--small">
  <div class="name-badge__name"></div>
  <img class="name-badge__avatar">
  <div class="name-badge__description"></div>
</div>

When using a modifier for the parent element only, and using the selector as shown above, the only thing you have to change is the class name for the parent element, and not changing class names for all elements inside of the parent. Not necessarily everything would have to be overwritten by the modifier (for instance, the font-size of the description wouldn’t change, or description would be even hidden in the "small" version).