Getting rid of unused CSS

I used a tool that identified I had 1770 unused CSS selectors and only 222 used selectors (I have a very minimalist design so this makes sense).

Now, I’m wondering how I can remove the unwanted css, since everything appears to be in different @bootstrap files to be imported.

Any ideas? I’m no CSS designer so only know the basics…

Thank you!

You should edit bootstrap.less and comment out any components that you’re not using

More on this here:

I know it’s and old topic, but maybe another option now would be grunt-uncss task?

Good idea and I like the article. Unfortunately it looks like it only works with HTML files that are listed. Would be nice if it could read a sitemap.xml.

1 Like

Actually, this may be a viable way:

I just put this into practice with Roots v7 and knocked my stylesheet down from 159kb to 20kb. It’s not a perfect process but it’s pretty slick if it’s something you need to do. I wrote a step-by-step post on doing it with Roots:


Just stumbled upon an article regarding removing unused CSS so I wanted to check what was in store for Roots/Sage since I am relying on that framework almost exclusively.

Regarding your post:

How is your experience with Sage and UnCSS? Any major differences (besideds gulp now instead of grunt)?

Haven’t tried the process yet so it might well just work but wanted to get a short hint beforehand.


Here’s a good guide on using gulp-uncss:

1 Like

Bare in mind when using UNCSS that you need to comment out the removal of classes for JS use like .collapse or any other that are added via JS as uncss didn’t pick those up last time i was using it. So you need to test it quite a bit after.

For a side note i stopped commenting out bootstrap because of problems with mixins etc. so you are removing only some parts in the end. But since you can get 250ms loading speed (pingdom) with a clean trellis+bedrock+sage install (using CDN and gzip) on it wasn’t that big of a deal anymore.

1 Like

i used autoptimize but can’t Defer unused CSS