BEM and Sass — Two Peas in a Pod

So remember how last week we talked about Sass? Well… I must have manifested too hard because this week I got sent a technical assessment that asks to use Sass. 🥲 This isn’t a bad thing, but I was still fairly new to the framework.

However, the assessment threw me for another loop because they wanted me to use BEM in conjunction with Sass. Naturally I began scrambling the internet for what BEM is and how it can work naturally with Sass. Turns out that I’ve been seeing what it is for a long time now, and also implementing it in my own work! Not sure where I learned it from, but hey, it’s working for me. It wasn’t until I started utilizing these together to style my webpages that I felt like I have been missing out… for a long time! I have been creating crazy large files and my code wasn’t DRY, not to mention it felt extremely disorganized. Using these two methods together really helped shape my code for the better.

What is BEM?

BEM stands for Block Element Modifier, and it’s a naming convention for your HTML that helps you structure and name your classes. If done properly, then you will be able to reuse some of these front-end components, making your code DRYer, and what is better than some reusable components?

Sass Refresher

In case you forgot, Sass stands for Synactically Awesome Stylesheets, and it’s a CSS preprocessor that is essentially steroids for your CSS. There are a lot of useful tools that are included, including mixins, variables, etc. We won’t cover it too much in this article, but please look at my Sass article to get a quick refresher!

Let’s take a quick look at a basic HTML example of some code that I’ve written:

If you look above, we have a very basic example of a nav bar. If we were to use CSS, we would have to target the li using .nav li. Which isn’t the worst, however if we decided that we wanted to either add classes to it or change the element altogether, we will have to go back and rewrite all of our CSS. Or, let’s say that we have conflicting styles (which is very common). By using a BEM approach, it takes away the chance of having conflicing styles. This isn’t ideal, and so now we have a better solution.

So what we did in this above example (including the addition of body and header elements), is we have added classes to each element. It looks a little bit more messy, but let me explain what we did and why it’s beneficial!

.nav is now the block, which means that anything that has double underscores attached will be elements that are within the block. If you look at the header section I added, we also have block elements with two dashes, which make these our modifiers.

So why is this approach better?

If you used BEM, then chances are that all of your classes are going to be unique, which will alleviate the chance of having incorrect styles or clashing styles. All we have to do now is change HTML elements without having to change all of the CSS because the class names will change the same. Also, if we decide to reuse this component elsewhere, we can do it without having to write out another set of CSS for that specific component.

Let’s take a quick example of what this looks like in Sass.

So instead of us having to type out every single class name individually, we can just nest them under the header or the .nav class with the appropriate dashes accompanying. It saves us from having to rewrite the parent selector multiple times, and it makes for better organization and possible change. From here, you can add any mixins, variables, or CSS that your heart desires!