How to remove unused CSS statements

Issue

If you have some huge amount of CSS code and you need to remove unused CSS statements, this guide is for you.

1st Solution – Using Online CSS evaluator

Go to https://uncss-online.com

Paste your HTML file content and corresponding CSS File content in given two input boxes.

Click on UnCSS my styles button.

Now you can see unused CSS free, shortened CSS code in the input box next to input boxes.

2nd Solution – Using PurgeCSS

First install PurgeCSS with NPM

npm i -g purgecss

Now you can use purgecss in your terminal. If you have one HTML file with corresponding CSS file, you can remove unused CSS files as below example

purgecss --css css/my.css  --content src/my.html

If you have multiple CSS files

purgecss --css css/my1.css css/my2.css --content src/my.html

Use both HTML and JS files

purgecss --css css/my1.css css/my2.css --content src/my.html src/my.js

Use wild card

purgecss --css css/my1.css css/my2.css --content src/*.html src/my.js

Save output to specific file

purgecss --css css/my1.css css/my2.css --content src/*.html src/my.js --output src/mynew.css

Tags: css