DEV Community

Cover image for How To Avoid Long BEM Modifiers
Steffen Pedersen
Steffen Pedersen

Posted on • Edited on

3

How To Avoid Long BEM Modifiers

Before we begin, we should all get on the same page.

What is BEM? 🤔

First of all, BEM is a naming convention. In my opinion, it makes the CSS easier to read and understand. It makes it easier to scale and generally more easy to work with. BEM is an abbreviation of the overall concept. The elements of the structure is Block, Element and Modifier. The description of the examples are inspired by the official guide.

Block

This is a standalone entity that has its own meaning and purpose. The block is .button.

.button {
    display: inline-block;
    padding: 1em;
}
Enter fullscreen mode Exit fullscreen mode

Element

This should be a part of a block that has no standalone meaning and purpose. It should be semantically tied to its block. The element is &__text.

.button {
    display: inline-block;
    padding: 1em;

    &__text {
        font-size: 1em;
        font-weight: 400;
    }
}
Enter fullscreen mode Exit fullscreen mode

Modifier

This should be a flag on a block or an element. Here we are able to change appearance or behavior. The modifier is &--bold.

.button {
    display: inline-block;
    padding: 1em;

    &__text {
        font-size: 1em;
        font-weight: 400;

        &--bold {
            font-weight: 700;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

One of the most important rules is, that you can’t have an element inside an element and you can’t have a modifier inside a modifier.

What is the problem? 🤔

With BEM modifiers the naming convention can result in very long selectors. This can damage the readability.

We could make modifiers like this:

.button {
  &.--small {
    height: 2em;
  }
}
Enter fullscreen mode Exit fullscreen mode

In this way we could do this <button class="button --small"></button>.

Instead of this:

.button {
  &--small {
    height: 2em;
  }
}
Enter fullscreen mode Exit fullscreen mode

Which results in longer selectors <button class="c-button c-button--small"></button>.

It would make it easier to get an overview, when reading the outputted code. We just need not to make classes named --modifier outside of a block. That would also be weird.

What do you think? 🤔
What could break this idea? 🤔

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
anki247 profile image
Anki Batsukh •

RSCSS

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay