Writing in BEM using LESS

2017-08-05 · 1 min

Overview

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

I like this for the following reasons:

• Less repeating code
• Ability to change the block name and auto cascade to the element descendants
• Fewer 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;
    }