Component With Elements

More complex components will have child elements. Each child element that needs styled should include a named class.

UI

BEM - Block, Element, Modifier

Source

<!-- πŸ‘ DO THIS -->
<figure class="photo">
  <img class="photo__img" src="https://picsum.photos/400/300">
  <figcaption class="photo__caption">BEM - Block, Element, Modifier</figcaption>
</figure>

<!-- πŸ‘Ž DON'T DO THIS -->
<figure class="photo">
  <img src="https://picsum.photos/400/300">
  <figcaption>BEM - Block, Element, Modifier</figcaption>
</figure>