I've inherited a poorly written site with a large amount of inline code and seemingly redundant/unnecessary css and lots of inline styles I should replace. Unfortunately it's a PHP site that requires login to view almost any of the content, so the tools I've seen so far to find unused CSS can only explore a single page of the site. Some tools allow you to give login information, but it's a business intranet site, and I'm not comfortable giving such information to a tool, especially not an online one.

Is there a better way than manually digging through the produced HTML to find what's needed and what isn't? Is there any tool I can run locally to log in to a development site instead of the public site? There's 800 lines of CSS as it is, so manually digging through (and testing) isn't exactly ideal.

2 answers

danwellman 5600

There are Firefox extensions (and presumably Chrome ones) which let you scan a page to see which CSS selectors from the style sheet are not being used, for example, one is CSS Usage which integrates with firebug. This particular one is probably not suitable as it seems to only work on a page-by-page basis not the whole site.

If you can roll-back to Firefox 3.6 there was a great extension called Dust-me selectors which had an option to spider a whole site to find unused selectors...

Answered about 8 years ago by danwellman

A bit long winded, but a possible workflow that might work would be first to download the site with something like http://www.httrack.com/ which, if memory serves, will make a flat file copy.

And then you could use TopStyle Pro to look for orphan styles - http://www.topstyle4.com/ It's part of the site reports functions there-in.

I don't know of anything similar for Mac OS, sorry.

Answered about 8 years ago by Tony Crockford