How to Remove Unused CSS From Your Website ?
Last Updated :
19 May, 2020
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.
javascript
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.
Similar Reads
How to reset/remove CSS styles for element ? The browser uses some pre-defined default values to most of the CSS properties. These default values may vary depending on the browser and also the version of the browser being used. These default values are given in order to ensure uniformity throughout web pages. But in some cases these defaults r
2 min read
How does CSS work under the hood ? Cascading Style Sheets referred to as CSS, is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable. The way elements should be rendered on screen is described by CSS. CS
3 min read
How CSS style overriding works ? In this article, we are going to learn how CSS style overriding works. Cascading Style Sheets referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this
3 min read
CSS Style Declaration removeProperty() Method The removeProperty() method is used to remove the existing CSS property. Syntax: It is used to remove the specified CSS property. object.removeProperty(propertyname)Parameters: It accepts a single parameter: propertyname: It is a required parameter that contains a string that represents the name of
1 min read
How to Remove Background from image in CSS? In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to
5 min read
Primer CSS Box Shadow Remove Primer CSS is a free open-source CSS framework that is built upon systems that create the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CS
2 min read