Meta Tags — Preview, Edit and Generate

Element With Modifier

In some cases, you may want to vary a single element in a component. In those cases add a modifier to the element instead of the component. I’ve found that modifying elements is much less common and less useful than modifying entire components.

UI

Source

<!-- 👍 DO THIS -->
<figure className="photo">
  <img className="photo__img photo__img--framed" src="https://picsum.photos/400/300" alt="" />
  <figcaption className="photo__caption photo__caption--large">BEM - Block, Element, Modifier</figcaption>
</figure>

<!-- 👎 DON'T DO THIS -->
<figure className="photo photo--framed photo--large">
  <img className="photo__img" src="https://picsum.photos/400/300" alt="" />
  <figcaption className="photo__caption">BEM - Block, Element, Modifier</figcaption>
</figure>