Writing in BEM using LESS

There’s CSS methodologies to help use write such as SMACSS or Atomic, one we’re going to look at today is Block Element Module

Overview

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 descendants
  • 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
Ash Grennan
Snr Software Engineer

Deliver value first, empower teams to make technical decisions, allow ownership, slice features thinly, enable and encourage constant value delivery through working software. Works @ AO.com, hold a BSc & MSc in software engineering, certified AWS Solutions Architect (more on LinkedIn). A fan of Serverless computing, distributed systems, and anything published by serverless.com ๐Ÿงก

Related