Meta Tags — Preview, Edit and Generate

Style Elements Based on the Component Modifier

If you find yourself consistently modifying elements of the same component together in the same way, then consider adding the modifier to the base of the component and adjusting styles for each child element based on that one modifier. This will increase specificity, but it makes modifying your component much simpler.

UI

Source

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

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