How do I identify and eliminate unused CSS styles from my bloated stylesheet?

Question

I have a legacy stylesheet that is now full of unused styles. The problem is identifying the necessary from the unnecessary. Are there any tools to help with this?

Answer 1

Install Google's pagespeed plugin for firebug:

http://code.google.com/speed/page-speed/

Then in Firebug, open the 'pagespeed' tab and, with 'performance' selected, click 'analyze performance'.

If you have unused style rules on the present page, then along with lots of other useful suggestions, you will see a list item labelled "Remove Unused Css". Click to expand it and see a breakdown by resource of unused css rules appearing on the present page, along with the memory size that you will save by removing the unused rules.

This is just one tiny feature of the pagespeed toolkit, which you definitely familiarize yourself with if you're at all interested in your page performance on the client side.

You may also be interested in yslow, a similar tool for firebug developed by yahoo.

Answer 2

npm install uncss -g

Then

uncss http://example.com/ > out.css

Answer 3

CSS Usage is a great Firefox add-in. You can browse multiple pages and it will work out which rules haven't been used on any of them - so it is more accurate than a tool that scans a single page.

Answer 4

You could try the Firefox Dust-Me Selectors add-on.

Answer 5

This tool called, "csscss" removes identifies duplicated styles:

One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It’s not a silver bullet, but it sure helps.

To do that, you need to have all the rulesets in your head at all times. That’s hard, csscss is easy. Let it tell you what is redundant.

Answer 6

There is a really handy plugin for Grunt called UnCSS. It will automatically remove unused CSS on the fly. Check out this link for more info:

Remove Unused CSS automatically using Grunt