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

1
2
3
4
5
6
7
8
9
10
block {
&__element {
&--modifier-alpha {
color: blue;
}
&--modifier--beta {
color: green;
}
}
}

So the compiled elements would look like this:

1
2
3
4
5
6
block__element--modifier-alpha {
color: blue;
}
block__element--modifier-beta {
color: green;
}