CSS Rules Cleanup Tool

Question

We have several massive CSS files that continued to grow over the years when new elements were added to our system, as well as JSP pages (including other JSP pages, etc.) that link to these files.

We know that we have many rules that are no longer in use, and many of them are redundant.

New tools just keep coming out. Is there a tool that (besides the obvious ones like Aptana and W3C CSS validator) that can analyze the directory and help in cleaning and optimizing CSS rules?

Answer 1

This is a difficult task ... especially if your HTML DOM content is generated on the fly in any way.

The Dust-Me-Selectors plugin is useful, but page by page, many selectors will not be used ... but will not necessarily be invalid.

Here are a few tricks I used to help cleanse.

One by one, insert some HORRID style that you can detect right away to determine if the selector is being used. eg.

border:6px dashed #ffaacc; padding:12px; 

Everything that does with a huge dotted pink border is now ... an "active" selector. If you can view most of your site / application without seeing it, then it is most likely "dead."

(if your CSS code is "generated", you can optimize it for testing with different colors at the same time; and use the generated content to add the "id" selector)

Another option, if you are using the generated CSS system ... is to add the final property to your selector, which sets ... the background image with the generated URL. eg.

 #selector_a > .foo{ ... background-image:url('selectortest/id_123.png'); } #selector_b .bar{ ... background-image:url('selectortest/id_124.png'); } 

Then you just browse your site / application for a while, and then check your weblog for HTTP image requests ... for any generated image URL that was not requested in the log ... you probably found "dead" .

Answer 2

Here's the Dust-Me-Selectors plugin for Firefox, although it does not view the page displayed in the browser, of course, through the directory.

Answer 3

Selenium allows you to automate page testing and select elements using css selectors. If you copy matches across a site, you can identify unmatched elements.