The Brady BEM

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.