How I’m Making My CSS More Efficient
By: Tyler Greason
Tags: Sass, CSS, Code, Bem, Web Development

I find one of the most exciting things about code to be its community’s penchant for efficiency. I love efficiency. My professional background is in commercial building energy efficiency, the practice of finding ways for commercial buildings (think libraries, restaurants, office buildings, etcetera) to use less energy. I’m one of the most punctual people you’ll meet because I have planned when I’ll leave for an event hours beforehand to ensure I’ll get there on time and use my time doing so efficiently. I even mentally plan routes through my home to maximize travel efficiency. So, when I say I love efficiency, I mean it.

Which is tough, because I also love CSS, and the struggle to find the best way to write plain CSS in an efficient and readable manner is real.

Over the last few weeks I have explored a couple solutions for CSS’s shortcomings: BEM and SASS. Each attempts to tackle a different problem that I’ll explain more about below, but keep in mind that each wants to make CSS easier to read and maintain, and more efficient to write.

BEM

BEM is a naming convention that stands for Block Element Modifier. There is nothing to install and very little to read on BEM. There are some strict rules, but they are not totally necessary to follow to benefit from BEM. To summarize:

BEM is a methodology of naming classes in a way that makes elements easier to select and makes your CSS easier to read and maintain.

Blocks are standalone nodes on your page. Navigation bars, buttons, and text inputs; nodes that don’t depend on the presence of other nodes.

Elements in BEM are nodes that depend on the presence of other nodes. These include children elements of navigation bars, list items, and radio button text.

Modifiers are exactly what they sound like: attributes we give to node’s classes that show they’re different. Examples include buttons that you want to be different colors or inputs of different sizes.

We use double underscores to separate blocks from elements and double hyphens to add modifiers.

For example: we want to select a green button inside our navigation bar. We would have given each button we want to select the classes `navigation__button navigation__button — green`. With these we can select all buttons inside navigation easily with `.navigation__button` and use a different selector to modify each of those buttons that we want to be green with `.navigation__button — green`.

This naming convention allows for less confusion when figuring out what an element was named. Especially if you are the one who wrote the CSS, you can probably quickly guess that you named the series of buttons inside the portfolio card container that you want to select `portfolioCard__button`. It also makes other BEM user’s code easier to parse, giving CSS a standard we can all share and benefit from.

I found BEM to be very easy to use. It helped me name classes quickly instead of stressing over what the right name was. The only times I was slowed by BEM was trying to figure out if I was using it exactly correctly. But because I was working on a small solo project, I learned it was less important that I use BEM the exact right way and more important that I use it to influence my naming convention in a way that would be easy for myself and others to figure out.

SASS

SASS, or Syntactically Awesome Style Sheet, is a stylesheet language that compiles into CSS. Taking a quick look at SASS’s syntax makes it obvious why it is so efficient to use. These are my favorite SASS features:

SASS allows for nested selectors. This means if you have a container element that needs styled along with multiple elements inside that container, you could select the container element and inside that selection include the container’s styling as well as the selectors and styling for elements nested inside it without needing to include the entire selector for each nested selection. This keeps your CSS selectors more lean and more DRY, which makes them more efficient.

SASS has mixins, which I think of as being very similar to JavaScript’s functions. Mixins hold a group of CSS declarations that can be called elsewhere in your code. They can even take arguments, just like a JavaScript function. However, they do not return values like a JavaScript function can. For that, use SASS’s function feature. Mixins in SASS are important because, just like functions in JavaScript, they reduce the amount of code we write, which makes programming more efficient. For example, if we want to center a number of elements using the tried-and-true `width: x%; margin: auto;` approach, we don’t have to write that once in each decloration. With mixins we can include it in each of those selectors with just one line of code.

SASS includes the ability to extend other selector’s properties. This is similar to including a mixin in a selector, but more akin to a class in JavaScript extending another class than calling a function. For example, if you want a series of buttons to all have the same styling but can’t easily select all of them at once, you could write a placeholder class that holds the styling for each of them, then extend that class using each of their selectors.

Overall SASS feels like it’s what CSS is supposed to be. It’s easier to write, more functional, and requires less coding, which makes it more DRY. It is not strictly better than vanilla CSS, but for projects of the size I am writing, I find it helps tremendously.

What’s Next?

Up next in my journey to make my CSS more efficient is Styled Components, which makes writing CSS for component based applications much easier. Much in the same way that SASS feels like it’s the way all CSS should be written, React’s reusable components feel like the way websites should have been developed from the get-go. Styled components look to be an extension of that idea and I couldn’t be more excited to play with them.

Find me on github or twitter. Check out my portfolio at my personal site, here: www.tylergreason.com.