How to Remove Unused CSS

Reduce your CSS files more than 60% during your development workflow with Purgecss.

Luca Spezzano
NotOnlyCSS
Published in
3 min readSep 11, 2019

--

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 inevitably 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!

Purgecss

Here Purgecss come 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[1] it will search in your html files(for example)[2] and from there it will create a new css file[3] only with the style that you really used.

--

--

Luca Spezzano
NotOnlyCSS

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.