BEM and SASS: A Perfect Match

What are they?

  • BEM (Block. Element. Modifier) is a naming methodology, which aims to solve many of the problems you’ll commonly encounter when naming classes and structuring your CSS. It also does a great job of enabling you to create reusable front end components, which is something we all strive for: to be healthy, wealthy and create reusable components.
  • SASS on the other hand, stands for Syntactically Awesome Style Sheets. Way to blow your own trumpet. Although, “awesome” is potentially an understated adjective for this thing. Their tagline, “CSS with superpowers” pretty much covers it. It allows you to nest selectors, create loops, functions and all the fun stuff that you wish you could do with CSS.

Traditional example

  • To target those li you’ll need to be doing something like .nav li. What happens if we want to change the list to instead be a group of divs? The CSS needs updating as well as the HTML.
  • .active may well be declared somewhere else in the CSS. Which may start conflicting with the styles. Especially if the conflicting selector comes in after you’ve created the navigation bar; you may not even spot the conflict until it’s too late.
  • This can’t be modular. It can’t be dropped anywhere in your code. What’s to say with this approach we don’t have .header li with some conflicting styles. It’s a never ending battle with specificity — easy for you to say.

BEM example

  • The class selectors in this component will (hopefully!) be unique. So other than stuff like fonts and colours that will always cascade, you don’t need to worry about conflicts.
  • We can change the HTML elements without having to change the CSS.
  • We’re being explicit. If we have nested elements that are the same in the component, it’s not a problem. They have a unique class that we can target without impacting the outside world.
  • You get into good habits about naming classes and it becomes second nature and consistent.
  • Best of all, we can pretty much just drop this component anywhere we like. Reusable components. Life goals.
  • I could go on, but I’m super lazy.

BEM and SASS example




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andy Barnes

Andy Barnes

Front end developer who likes to design. Lover of technology, 80’s music and Dominic Toretto.