How to Remove Unused CSS From Your Website ?

The CSS files of your website can sometimes become quite large. This will mostly happen when you will build new classes without deleting the old ones which you now have stopped using, making the CSS file very messy for other contributors to understand and modify. 

This can also happen if you use a pre-built theme from WordPress.  Here, we will be knowing how to reduce your CSS file size at a considerate ratio. There are some tools available to remove unused CSS. Here, we will be using PurifyCSS.

Prerequisites:

• You will be required to install Node, it will be used to execute the code. Download and install Node, which will include the inbuilt  package  manager NPM.
• You will also need any text editor, and if you don’t have one, try using Visual Studio Code.

Understanding how PurifyCSS works: PurifyCSS gets all HTML files through a range of CSS files. It means that we can’t just provide our index.html file, because we might have different HTML files present through a range of templates on our website. The list of HTML files will then check through the provided CSS files, like style.css and custom.css. In your case, it can be different, just think which of your files are using same CSS files. The similar pages will then be checked through CSS files. If not done, then we might end up losing the required CSS files.

Installing PurifyCSS: Install Node and get access to its package manager, NPM. PurifyCSS has an in built NPM Package for installation, install it by running the below command in the terminal at the root directory of the project folder: 

npm i -D purify-css

Preparing our files: We will be needing some HTML files along with their CSS files. In our case, we suppose the main bulk of our CSS is in the style.css file. 

In our root directory, we create a HTML file for each HTML layout that we want to process :

• Homepage
• Practice
• Contests
• Internships
• Profile
• jobs

After creating the template files that matches our website, just copy and paste them into the new files that we have created in our directory. Then we do the same with the CSS file.

The root directory for the purify tool will look like this: 

• node_modules/
• practice.html
• contests.html
• index.html
• internships.html
• profile.html
• jobs.html
• style.css

Creating the JavaScript Purifier: Now, create a new .js file in the root directory, like purifyMyCSS.js. Add the following JavaScript code to the file.

const purify = require("purify-css")

// Reference of all HTML files from root directory
let content = ['*.html'];

// Reference of all CSS files from root directory
let css = ['*.css'];

let files = {

    // Write purified CSS into a file
    output: 'purified.css',
    minified: true, // Minify boolean
    info: true  // Output information
};

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

This is enough for the working of PurifyCSS. Now just run the code using Node.

Purifying: After follow the above steps, unused CSS can be removed by running the following code in a terminal at the root directory level:

node purifyMyCss.js

And that is it, you will get an output similar to the following:

Now you’ll get a new CSS file named purified.css, just copy the contents of this file and paste them to your website’s CSS file.

Summary:
PurifyCSS reduced around 70% of unused CSS from our files which is quite a lot if you have a large website like GeeksforGeeks. But, if you have a single-page website, then you don’t need to follow all these steps. There are various free online tools which you can use. One of them is UNCSS, which allows you to paste HTML contents in one input and CSS contents in the other. Hit the button, and your shortened CSS will be appended to the output box, copy it and paste it to your desired place.