Reduce your CSS files more than 60% during your development workflow with Purgecss.
I have been searching for a while a tool that will allow me to clean my CSS from unused style.
Why was I looking for this kind of tool? Because nowadays almost every developer uses a lot of CSS frameworks and libraries to develop interfaces faster and easier so it is inevitable that the size of css files increase a lot.
But how much of the CSS style that you import from external libraries you really use? Sometimes even less than 20%, so why do you need to have all this unused style? No reason!
Here Purgecss comes to help, it is a tool which helps to remove unused CSS and it can be used as part of your development workflow.
How Purgecss is working under the scene? It needs to know:
1 - the file css that you want to clean.
2 - the files where it need to inspect
3 - the destination path of the new file generated
So from the initial css file it will search in your html files(for example) and from there it will create a new css file only with the style that you really used.
I’m sure that if you try it you will be able to reduce more than 60% the size of your CSS.
The build tools
The cool thing of Purgecss is that you can implement it in your development workflow with a lot of popular build tools:
The JS frameworks
How to use Purgecss
I wrote a whole article about how to set up a CSS build process with Gulp, there I used also Purgecss so if you are interested in this build process I suggest you to read this article.
Here on Medium (https://medium.com/notonlycss/how-to-remove-unused-css-ad67421794a7), I will show you how to implement Purgecss with Gulp and Nuxt.js.