BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale.
BEM naming provides three specific benefits:
- It communicates purpose or function
- It communicates component structure
- It sets a consistent low-level of specificity for styling selectors
How It Works
A BEM class name includes up to three parts.
- Block: The outermost parent element of the component is defined as the block.
- Element: Inside of the component may be one or more children called elements.
- Modifier: Either a block or element may have a variation signified by a modifier.
If all three are used in a name it would look something like this:
After that brief introduction, let’s look at some specific examples.
Component With No Elements or Modifiers
Simple components may only employ a single element and thus a single class which would be the block.
Component With A Modifier
A component may have a variation. The variation should be implemented with a modifier class.
Don’t use the modifier class by itself. The modifier class is intended to augment, not replace, the base class.
Component With Elements
More complex components will have child elements. Each child element that needs styled should include a named class.
One of the purposes behind BEM is to keep specificity low and consistent. Don’t omit class names from the child elements in your HTML. That will force you to use a selector with increased specificity to style those bare elements inside the component (see
figcaption elements below). Leaving those classes off may be more succinct, but you will increase risks of cascade issues in the future. One goal of BEM is for most selectors to use just a single class name.
If your component has child elements several levels deep, don’t try to represent each level in the class name. BEM is not intended to communicate structural depth. A BEM class name representing a child element in the component should only include the base/block name and the one element name. In the examples below, note that
photo__caption__quote is an incorrect usage of BEM, while
photo__quote is more appropriate.
Element With Modifier
In some cases, you may want to vary a single element in a component. In those cases add a modifier to the element instead of the component. I’ve found that modifying elements is much less common and less useful than modifying entire components.
Style Elements Based on the Component Modifier
If you find yourself consistently modifying elements of the same component together in the same way, then consider adding the modifier to the base of the component and adjusting styles for each child element based on that one modifier. This will increase specificity, but it makes modifying your component much simpler.
BEM names intentionally use double underscores and double hyphens instead of single to separate Block-Element-Modifier. The reason is so that single hyphens can be used as word separators. Class names should be very readable, so abbreviation isn’t always desirable unless the abbreviations are universally recognizable.
// These class names are harder to read
BEM Will Make You Happy
If you are not using BEM currently, I would highly recommend using it on your next project. It may be different than what you’re used to, but I’m convinced you’ll quickly see the benefits it provides on projects both large and small. And, hopefully, these examples will help you to avoid some of the common mistakes made by most of us when first diving into this quirky naming convention.