BEM by Example

06-12-17 Nathan Rambeck

BEM is a popular naming convention for CSS class names that we use widely here at Sparkbox. The fundamental concepts of BEM are simple and straightforward, but there are common errors those new to BEM make that this post seeks to explain through a series of examples.

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.


    Why BEM

    BEM naming provides three specific benefits:

    1. It communicates purpose or function
    2. It communicates component structure
    3. It sets a consistent low-level of specificity for styling selectors

    How It Works

    A BEM class name includes up to three parts.

    1. Block: The outermost parent element of the component is defined as the block.
    2. Element: Inside of the component may be one or more children called elements.
    3. 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 img and 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.

    Look at me!
    Look at me!

    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.

    Look at me!
    Look at me!

    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.

    Look at me!

    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.

    Look at me!
    Look at me!

    Multi-word Names

    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.