Purge away unused css or scss properties with Purgecss!

Daniel Uhlmann -

Have you ever had unused CSS rules in your files that only make your code more confusing? In this post, I will show you how to get rid of them using Purgecss!

Some days ago a friend of mine just crawled through my git repositories and told me that I still have unused CSS rules in some files. Caused by the fact that I'm relatively lazy about such things, I decided to clean up my files with Purgecss.

I want to do this in my own files! Please explain!

So Purgecss is a tool to remove unused CSS properties. It can be easily implemented in your daily workflow. You can use this tool in a couple of ways:

  • CLI
  • JavaScript API
  • Webpack
  • Gulp
  • Rollup

Really man.. Enough „documentation like“ blah blah. Let's get your hands dirty!

Okay, okay! Don't lose yourself. So Purgecss is a NodeJS Application, that's why you need to have NodeJS installed. Once that's done, you can use:

npm install purgecss -g

Hint: with the "g" flag you can install Purgecss globally to use it in any kind of project.

So after that, go grab a project of yourself and add some unused CSS properties to it. I've already created some for you here:

#test1 {
  margin: 300px;
  background-color: red;
}

.xl\:align-middle {
    vertical-align: middle;
}

.xl\:align-bottom {
    vertical-align: bottom;
}

Still here with me? Fine! So now you can begin to scan your files. Open your Command Prompt and type in:

purgecss --css style.css --content *.html

Purgecss now will scan your CSS file named „style.css“. In this example, we want to analyze every HTML file with Purgecss.

Wooha! That's quite a lot of output coming back!

I know! And because nobody like such a confusing output in a tiny CLI window, we can modify our command. First, we have to create a folder to save the outcoming results. An obvious name for this job would be "results". So go in your project folder, create the results folder and customize your command with the following: 

purgecss --css style.css --content *.html --out result

Now you have your file cleaned up in your results folder. Easy as that, right?

If you want to check out the Purgecss project, I refer you to https://www.purgecss.com/.