How to write super clean stylesheets with minimal effort

Like many topics on the internet, there’s an overwhelming amount of information when it comes to organizing your CSS. The purpose of this article is to detail what we at Insiten have found to be the most effective techniques for writing clear and debuggable stylesheets. Below is an opinionated, uncomplicated list of advice that you and your team can implement to significantly improve the readability, maintainability, and overall quality of your code. Let’s get right into it:

1. Use BEM: BEM (block-element-modifier) is a methodology for writing CSS that serves the purpose of organizing your code into a consistent, easy-to-follow pattern. Our team experienced a significant boost in productivity and efficiency in our styling after making the switch to BEM. It’s simple, it’s well-known, and it scales really well. Unless you have good reason to structure your code another way, I would highly recommend following BEM in any non-trivial project.
2. Use SCSS: SCSS (also known as “Sass”), is commonly touted as “CSS with superpowers”. SCSS has a wide array of capabilities, but there are an essential few that we use every day and have greatly improved our efficiency:

• Nesting: With SCSS, you have the convenient ability to nest without the need to repeat selectors like in CSS. Not only does that mean less typing, but it also allows you to create a namespace for a given block of code and be sure your styles aren’t competing with each other. I recommend nesting no more than three levels deep. Also note that when writing your nested styles in BEM, you can use the ampersand (&) to avoid having to repeatedly type selectors, which makes it easy to track down a specific style declaration even in the densest of files.
• Variables: Declare values once and reference them as many times as you like. For a long time, variables were only available when using CSS pre-processors, but vanilla CSS now offers them as well — their official name is CSS custom properties. You may prefer one over the other depending on your project, but you should absolutely use some form of variables in your stylesheets.
• Maps: A table of key-value pairs. One particularly helpful use case for these is standardizing z-index values within a project — this particular trick has served our team immensely (we have 14 values in our largest project’s z-index map at the time of writing this article).
• Mixins: Chunks of code that are defined once and repeatable across the project. Not only do they free you from having to copy/paste code, but you can also pass them parameters — perfect for cases where you have elements that are mostly uniform but have some unique property/properties. The “componentization” that modern JS libraries (namely Angular, React, and Vue) encourage has reduced the utility of mixins to some degree, but there are still cases in which they’re handy.
• Partials: By prefixing a SCSS file with an underscore, you can then import all of that file’s contents into any other SCSS file before it gets compiled to CSS. This is a useful technique for when you keep files small and well-defined — an example of how you could use this is defining global styles such as typography, colors, and animations in separate partials and then import them wherever they’re needed in other parts of the project.

That’s it! Simply following BEM and leveraging a few SCSS features will take your stylesheets to the next level. If you’re already used to writing plain CSS, upgrading to SCSS is pretty straighforward. SCSS is a superset of CSS, meaning that any valid CSS is valid SCSS — you can incorporate these tips into your workflow little by little if it seems like a lot to take on at once.

One last thing I wanted to point out is that SCSS is particularly useful at keeping code DRY in ways that CSS simply can’t. If you find that your styles are tedious to write, there’s probably a more efficient way with SCSS. Also, SCSS has even more to offer than what I’ve listed here — built-in functions, control directives, and operations are some other especially cool features, although the above list is where you’ll find the most bang-for-your-buck.

Below are some other excellent resources if you want to dig even deeper:

• Official SCSS reference documentation
• Syntax podcast episodes on BEM and CSS pre-processors
• extend directive is dangerous
• Advanced SCSS tricks for the hungry