Web development, or rather the art of it, is an important aspect of being able to get the website of your dreams. To be able to create a visually appealing website is of prime importance, if you want a good ranking of your website. Not only does it attract the users/viewers, but also makes sure that they stay there long enough and return back when needed.
One of the main aspects of a ‘nice’ website is the CSS. It is the CSS that allows you to create the layout of the website, the design and the layout. The main function of the CSS is to separate the style of the website from its content. There are times when some changes are required in a website; this is where the results can grow rather complex. It is these complexities that can reflect on your CSS files, hence making it tough to comprehend. This is where your codes start to appear ‘dirty’ or cluttered and unprofessional.
Making sure that your website has a rather ‘clean CSS’ makes sure of minimized load time, better user’s experience and enhanced Search engine optimisation-SEO. It showcases developer’s skills and a better understanding of the system design. However, to ‘actually clean-up the CSS’ is rather a tedious task, not to forget that it is also time consuming. Nevertheless, the good news is that there are some great tools to help you do just that. Let us take a look:
Factors that Pile up to Unused CSS
Here are some of the top factors that lead to the unused CSS:
LIBRARIES AND FRAMEWORK
During the entire course of web development, one needs to apply the external framework and libraries. For this, there are multiple frameworks available, each with different applications. While these frameworks are quite important for the development by offering multiple components and patterns, they still contribute to an increased file size.
CONTINUOUS CHANGE
Regular or continuous changes that occur during the time of development also contribute to the piling-up of the CSS. It gets messy when the developers ‘forget’ to clean up this mess caused due to the changes made on the website.
How to remove unused css
Now that we know what and how the CSS piles up, let us take a look at some of the best ways to get rid of it:
Manual Changes
As mentioned earlier, the task of manual removal of CSS is rather time-consuming, resulting in delayed development. For this you need to:
METHOD 1
- Go to your web page
- Now, right click on Inspect.
- Next Run: ctrl + shift + P
- This will display the Command interface.
- Now locate the ‘Show Coverage’ option
- From the ‘Show Coverage’ option click on the CSS file.
- If there is a red line next to a certain CSS file, then it is not executed.
- If there is a green line next to a CSS file, then it has been executed.
- However, both the colored lines depict that some CSS code has been executed.
- The above test is page specific. Hence you have to run it across all the pages to know how many CSS are available.
METHOD 2
- Go to the webpage
- Now right click on the Inspect option.
- Next click on the ‘Arrow’ .
- Now click on the CSS Overview
- Now click on ‘Capture Overview’ to display the CSS overview page.
- At this page go to the ‘Unused Declaration’ option.
Now let us take a look at some of the methods used to remove unused CSS using some tools.
- Purify CSS
The PurifyCSS helps removes the unused CSS from the project. This can also be used in the development environment with the help of certain tools such as the webpack, gulp.js, or Grunt:
- Start by creating a project folder
- Open this folder with the help of VScode
- Now create two files within your project folder: index.html and style.css
- Next go to the code editor terminal
- Here, run the command below to install the PurifyCSS at the root directory:
npm install purify-css
- Now go to your index.html file and write the following basic code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Document</title>
</head>
<body>
<h1>Hello, LogRocket!</h1>
<p>This is a basic purify-css illustration.</p>
</body>
</html>
- Next write the simple style within your style.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: aliceblue;
}
h1 {
color: blueviolet;
}
#div{
margin: auto;
}
.header{
background-color: blue;
color: white;
padding: 10px;
text-align: center;
}
.btn {
background-color: blue;
color: white;
}
- Next create a cssPurifier.js file within the root directory of the project.
const purify = require(‘purify-css’);
const content = [‘*.html’];
const css = [‘*.css’];
const options = {
output: ‘purifyAndMinified.css’,
minify: true,
info: true
};
purify(content, css, options, function (purifiedAndMinifiedResult){
console.log(purifiedAndMinifiedResult);
});
- Now to execute the script, run the command:
node cssPurifier
- Finally the file will comprise of the minified and the purified CSS once the cssPurifier.js script is executed.
- CLean CSS
If you have either a small CSS file or a large stylesheet, CleanCSS can ease the code for best usage. The example code below shows how to apply the CleanCSS to minify a CSS file:
const CleanCSS = require(‘clean-css’);
const cssContent = [“style.css”]
const minifiedCSS = new CleanCSS().minify(cssContent).styles;
console.log(minifiedCSS);
CONCLUSION
So, there you have it friends, this is all that we have at the moment on How to remove unused css. Please do share your feedback on how you found this article so far.
