Recently while explaining BEM (Box, Element, Modifier) methodology, it occurred to me that the perfect visual example was the Brady Bunch title scene. It’s made up of a large box split into nine elements each containing a unique character from the TV show.
The HTML markup might look like this:
<ul class="brady__box">
<li class="brady__element">
<i class="brady__character"></i>
</li>
...
</ul>