BEM Tips: Avoid Chaining Modifiers

By: Amanda Cheung

At DockYard, we use the BEM methodology for naming our CSS classes. BEM stands for Block, Element, Modifier and is a front-end development technique that suggests a class naming convention for your HTML elements. If you aren’t already familiar with BEM, it would be helpful to take a look at Harry Robert’s MindBEMding blog post and the BEM website first.

When I started looking into using BEM, I thought it would definitely work well for large web applications. The more rules we could put in place regarding naming conventions, the better. What I didn’t understand was what to do when an element could be considered an element of a block or a modifier. If I had a button that was in the footer and it was styled differently than other buttons in the website, should it be named .footer__button or .button--footer? Arguments could be made for both sides, so is one better than the other?

After trying out both ways, .footer__button proved more scalable because this rule could be consistently applied in more situations. Could there be more types of buttons in the footer? If there are also social buttons in the footer, our choices now become .footer__button--social or .button--footer--social. In the second one, is social modifying footer and footer modifying button? Or is social modifying button as well? To avoid confusion, I would call it .footer__button--social and not chain my modifiers. This doesn’t mean we shouldn’t use multiple modifiers in a class name at all. .person--female__hand--right is still fair game. It’s clear that female is modifying person and right is modifying hand.

TL;DR

If I had an element that could potentially be either an element of a block or modifying an element, the latter is better because chaining modifiers can be confusing.