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>
Initially, each character would be styled the same:
The characters all inherit the base styles from the character element. And then the modifier classes are added to style each family member uniquely:
<ul class="brady__box">
<li class="brady__element">
<i class="brady__character brady__character_member_marcia"></i>
</li>
<li class="brady__element">
<i class="brady__character brady__character_member_carol"></i>
</li>
...
</ul>
The Result
Even though Carol looks a little like a blonde Princess Leia and Alice looks like a matador, the result demonstrates how scalable BEM can be.
See the Pen The Brady BEM by Martin Hofmann (@Martskin) on CodePen.0