How to Remove Unused CSS and Reduce your File Size

How many times were we assign to a project that needs a redesign or a new feature and soon as we notice, you’ve added lots of new CSS and there are a lot of css classes that are not necessary anymore but we aren´t aware of that?

A bigger CSS file indicates more significant download times and messy code that needs to be refactored.

Recently I had that problem. I had a huge amount of scss files, that were compiled to a big css file, with several classes that werent needed. Unfortunately it resolved my problem only partially since my main problem was after all, an overriding cascade of styles..

This post is going to be, how did I manage to check my unused css.
Between several tools that are already available for use with getting rid of old, unused CSS, I used the PurifyCSS.

So, how does PurifyCSS works?

PurifyCSS works by grabbing all HTML files that we specify and compares against any given CSS file.

Any selectors in your CSS which aren’t being used will be removed, leaving you with only the styles that you actually need.

Your original css file is not going to be changed, but instead a new one will be created. You can then even confirm what PurifyCSS removed, by compare both css files with Notepad++.

Installing PurifyCSS

First check that you have Node installed,since we have access to its package manager, NPM.

Then, run the following command in your terminal at the root directory of your project folder.

npm i -D purify-css

This is standalone installation, if you need for Build Time, check their github documentation.

Create the PurifyCSS script

Now we have to create a new .js file in the root directory, like PurifyCSS.js.

const purify = require("purify-css")

let content = ['*.html']; 
// Glob pattern to ref all HTML files from root directory.

let css = ['*.css'];
// Glob pattern to ref all CSS files from root directory.

let options = {
    // Will write purified CSS to this file.
    output: 'purified.css',
    // Output file name
    minify: true, 
    // Will minify CSS code in addition to purify.
    info: true 
    // Output information on how much reduction was achieved,
    rejected: true 
   // Logs out removed selectors
};

purify(content, css, options, function (purifiedAndMinifiedResult) {
    console.log(purifiedAndMinifiedResult);
});

Now, let's Purify!

Now, in a terminal at the root directory level, run the following command:

node purifyCSS.js

And boom, you should get an output similar to the following.

In my case I only had the file size reduced by 6% because my main problem were overriding styles, but there are cases in which the files are reduced by 70% and up.

Bellow my size saved, we also have the Rejected selectors list because we added the rejected: true option.

Now, we have a new file in our root directory, named purified.css, and all the unwanted css will have vanished.

Now we can copy this new file and replace our previous css file, or in my case what I did, since my main css styles file was generated after compiling all the scss files, I compared both files with Notepad++ and then searched for the removed classes in my client's project and carefully checked if the class wasn't really in use (sometimes js is fetching a css class) and removed the unused class from my scss file.

Have you ever had the same problem?
What did you use to solve?