6 Tips For Refactoring Your CSS With SCSS

6 Tips For Refactoring Your CSS With SCSS

It happens. You’re focusing on building the product. Sprinting towards deadlines, when all of a sudden you realize that you’ve got a monster of a stylesheet which is probably filled with repetitions and old code. It can be a really overwhelming feeling. Here’s 6 tips for getting started, so pump yourself up and dig in.

1. Use the Chrome Audit Tool to see where you’ve got dead code. Especially if you’re using a framework like Bootstrap, you’ve most likely got some code that isn’t actually being called by your HTML but is still weighing down your application. Simply right click to “Inspect Element” and then navigate to the Audit tab.

2. Cut dead code with Uncss- After you’ve done an audit to see if you’ve got dead code, use Uncss, a Node.js powered tool executed by Javascript that parses your CSS and removes any rules not being used by your HTML. This is great to find dead code you’ve forgotten about, or that might have come along for the ride with a framework.

3. Use cssstats.com to visually see where you’ve got repitition. Now that you’ve cut code you’re not using, check to see what you’re overusing. This site will tell you how many unique background colors you have, how many text sizes you’re referencing, and the specificity of your tags.

4. Switch to SASS if you’re not already using it. Originally written in ruby, SASS has some great ways to save time and lines of code, and reduce your HTTP requests all at the same time. Simply download the gem, and then rename your .CSS files in your command line to .SCSS files, and you can get going.

5. Use SASS partials- one of the major advantages to SASS is that you can parse files out on your end, without it having effect on the user side. As long as you name your file with a leading underscore, and then use the import tag to reference all your partials in a master css file, SASS will compile everything and serve it to the browser as a single CSS file. This means you can start taking chunks out of your code to begin working with, like your navbar or footer, just to keep yourself organized.

6. Use SASS variables- SASS also has some great built in tricks - like creating variables. This means you can create a variable for your font stack and refer to it throughout your stylesheet, and if you decide to change it, you only have to do so in one place.