Greg Babiars's Blog

Generating BEM Rules with LESS

Edit (2017-05-19): This was a horrible idea and you should absolutely not do this. Much better to keep the code flat so it is easier to search

BEM is a great way to build styles that work well with components. For work, we are using LESS for preprocessing. While working on building some reusable components, I stumbled upon a nice pattern for utilizing nesting to build BEM style rules. Let’s look at a quick example how we can write our styles in LESS using nesting and generate a nice flat BEM style result.

LESS:

.block {
    font-size: 14px;

    &__element-one {
        color: black;

        &--modifier-one {
            color: blue;
        }

        &--modifier-two {
            color: red;
        }
    }

    &__element-two {
        color: grey;

        &--modifier-one {
            color: green;
        }

        &--modifier-two {
            color: yellow;
        }
    }
}

Generated CSS:

.block {
  font-size: 14px;
}
.block__element-one {
  color: black;
}
.block__element-one--modifier-one {
  color: blue;
}
.block__element-one--modifier-two {
  color: red;
}
.block__element-two {
  color: grey;
}
.block__element-two--modifier-one {
  color: green;
}
.block__element-two--modifier-two {
  color: yellow;
}

This simple pattern allows us to avoid duplicating the block and elements for each of the nested elements and modifiers respectively and the resulting CSS is nice and clean.

Posted May 15, 2015

author Greg BabiarsWritten by Greg Babiars who builds things for the web. You can follow me on Twitter.