Neat ways to write BEM without being verbose

I love naming classes using BEM, which is a good way to indicate what classes represent (and where to find them in your project), without forcing it into a hierarchy that will cause problems later if you have to change the markup.

Problem is, it can get a bit verbose though.  Especially if you’re being super specific with your names. Writing CSS selectors for long class names is repetitive and annoying. So here’s 2 tips for making it easier using SCSS:

/* SASS */
.feature-box {
   background: #fff;
   &__title {
      color: #000;
   }
}

/* CSS */
.feature-box { 
   background: #fff; 
}
.feature-box__title { 
   color: #000; 
}

I use the above a lot. But it can get tricky if you want to add a modifier to the block – which I’ve heard many people say you shouldn’t do, but I often find I need to. For example if I need a wider version of the feature box where the title is larger, I’d do this:

/* SASS */
.feature-box {
   &--wide & {
      width: 100%;
      &__title {
         color: #000;
      }
   }
}

/* CSS */
.feature-box--wide { 
   background: #fff; 
}
.feature-box--wide .feature-box__title { 
   color: #000; 
}