loading...

How to Remove Unused CSS

Luca Spezzano on October 12, 2019

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... [Read Full]
markdown guide
 

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.

 
 

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?

 

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.

 

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.

 

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

 

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

 

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

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

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

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

 
 

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

 

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

code of conduct - report abuse