Writing in BEM using LESS

This is something I found myself thinking about when using the Block Element Module (BEM) methodology when coding using the preprocessor LESS.

I like this for the follow reasons:

  • Less repeating code
  • ability to change the block name and auto cascade to the element desendants
  • Less lines and easier to read

The code

block {
  &__element {
    &--modifier-alpha {
       color: blue;
    }
    &--modifier--beta {
       color: green;
    }
  }
}

So the compiled elements would look like this:

block__element--modifier-alpha {
  color: blue;
}
block__element--modifier-beta {
  color: green;
}

 

Ash Grennan

I can cook 1 minute rice in 58 seconds, I enjoy coding and sharing things.

Share