Cleaning up CSS styles

Question

I'm web developer. Before some time I have got the project to maintain. The project is on-line for a few years now and there were few more maintainers before me. Over its lifetime there were many changes in functionality. Many features were added, some of them later were removed as unused. Some from these features required new design elements, so new CSS code were added also. But when these features were removed, added CSS were left. Also every maintainer added his own css styles for small fixes like padding, margins, etc. After a while, CSS files become huge pile of crap :-) I can find many CSS described elements in the same way, but in different CSS file places. Yes, I know that I can minimize and compress CSS files, but I want to clean-up them. So how I can clean-up all this mess?

I need tools/practices/suggestions about these problems:

• Find the same described elements in different CSS places.
• Collect unused CSS classes or other descriptions (maybe some tool/browser plug-in which analyses CSS and collects unused styles).
• Tools to refactor html code by replacing few same described CSS styles to one style.
• Something else...

Answer 1

You should give Dust me selector a try. It's a firefox addon that will highlight all unused css. Been very helpful for me =)

Answer 2

A tool similar to ‘Dust me selector’ is Deadweight, a Ruby command-line tool to find unused CSS rules. But that's only part of your problem… if you ever find tools to do the other stuff you want to do, please let the rest of the world know right here.