DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Luca Spezzano
Luca Spezzano

Posted on

How to Remove Unused CSS

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!

Purgecss
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[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.

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:
• CLI
• JavaScript API
• Webpack
• Gulp
• Rollup

The JS frameworks
We can use it also with the most modern JavaScript frameworks such as:
• React
• Vue
• Next
• Nuxt

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.

Top comments (15)

Collapse
 
highcenburg profile image
Vicente Reyes

I hope there's an AI that detects unused CSS. As a backend dev that uses themes, it takes a lot of time to go over each css element and see if it affects the front end.

Collapse
 
93lucasp profile image
Luca Spezzano Author

Read the article it can be useful;)

Collapse
 
highcenburg profile image
Vicente Reyes

I see.

Collapse
 
codemouse92 profile image
Jason C. McDonald

We encourage the entire article to be published on DEV.to (if you have proper rights), with a linkback if appropriate. Otherwise, we recommend original material, such as an original commentary on the article. From the Terms of Use:

Users must make a good-faith effort to share content that is...not designed primarily for the purposes of promotion or creating backlinks. Additionally, posts must contain substantial content — they may not merely reference an external link that contains the full post.

Posts that are simply intended to encourage readers to view an external resource are discouraged.

Thank you.

Collapse
 
dennisk profile image
Dennis Keirsgieter

What does this do differently then github.com/Developmint/nuxt-purgecss in nuxt case? (I'm finding that module inconsistent)

Collapse
 
93lucasp profile image
Luca Spezzano Author

They should do the same thing, I found faster and easier to implement PurgeCSS with that plugin :)

Collapse
 
dennisk profile image
Dennis Keirsgieter

Could you tell me maybe then why i still have classes repeated in my code sometimes with nuxt? It feels like it doesn't know about my framework (buefy in this case). So sometimes its duplicated or even include 3 sometimes on some rare occasions...

Thread Thread
 
93lucasp profile image
Luca Spezzano Author

Do you import buefy in your css? I mean before that you check your css with PurgeCSS the code of Buefy is already there?

Thread Thread
 
dennisk profile image
Dennis Keirsgieter • Edited on

I just use the nuxt-buefy module for that. So i assume that gets loaded first before the build stuff is being ran... Are you using this by any chance aswell?

The upper is my local dev and the bottom is the final build
thepracticaldev.s3.amazonaws.com/i...

Thread Thread
 
93lucasp profile image
Luca Spezzano Author

Yes it could be, no actually I'm not using nuxt-buefy

Collapse
 
highcenburg profile image
Vicente Reyes

Hi, community mod here.

Users must make a good-faith effort to share content that is...not designed primarily for the purposes of promotion or creating backlinks. Additionally, posts must contain substantial content — they may not merely reference an external link that contains the full post.

Collapse
 
anwar_nairi profile image
Anwar

Love this tool for my Vue less apps. Otherwise, had an hard time figuring out how to tell purgecss to go parse my .vue files in order to extract only used classes 😭

Does anyone have a clue how to do it? Using gulp if possible?

Collapse
 
palnes profile image
PÃ¥l Nes

Medium wants me to pay for this article.

Collapse
 
bhadresharya profile image
Bhadresh Arya

What about the CSS that comes in use after some user interaction. I've tried gulp-uncss but it removes so many useful css like dropdowns, modals, popups, tooltips etc...

Collapse
 
93lucasp profile image
Luca Spezzano Author

It should work because your dropdowns, modals, popups, tooltips etc are in your HTML. It can cause problems when you add class dynamically.

🤯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs