Does anybody know of a CSS analysis tool?

Question

I'm looking for a tool that can analyze a large site and look for orphaned css.

I work on this project that has gone through a couple of UI updates. Scrapping the whole thing and redoing it all would take forever. What I would like is a tool that reads a css file and then lets you browse the site, keeping track of what definitions were used and how often.

Then I can go through the css file and find code that I did use and determine if it is indeed deprecated and can be deleted.

Thoughts?

Answer 1

Firefox has a great extension called Dust-Me Selectors for flagging up classes/ids that are not used on the current page.

There's also TopStyle, which promises to help you do the following (I've not used it, and can't vouch for it though):

• Preview CSS while you write it.
• Easily create pleasant color schemes for your site.
• Style Checker validates your CSS syntax against multiple browsers.
• Use Site Reports to see at-a-glance where CSS styles are used in your site.
• Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.

Answer 2

Internet Explorer 8 has this feature called Developer Tools which can help you with that. You can read about it from the IEBlog entry. If you don't have IE8 you can download the toolbar from here.

Answer 3

I would suggest CSSEdit. Been using it for years. Has an inbuilt validator and an x-ray inspector.