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:

brady-bem-2

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>

brady-bem-4

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

Leave a Reply

Your email address will not be published. Required fields are marked *