Writing in BEM using LESS

2017-08-05 · 1 min

There are several CSS methodologies, such as SMACSS and Atomic CSS. This is a pattern I settled on for the Block Element Modifier (BEM) methodology with the LESS preprocessor.

I like it because:

• there's less repeated code
• changing the block name cascades to all of its elements
• it's shorter and easier to read

The code

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

It compiles to:

.block__element--modifier-alpha {
  color: blue;
}

.block__element--modifier-beta {
  color: green;
}