CSS rule cleanup tool

Question

We have several massive CSS files that just kept growing over the years whenever new elements were added to our system as well as JSP pages (which further include other JSP pages and so on) that reference these files.

We know that we have many rules that are no longer used and many that are redundant.

New tools just keep coming out. Is there a tool that (besides obvious ones such as Aptana and W3C's CSS validator) that can analyze a directory and aid in cleaning up and optimizing CSS rules?

Answer 1

There's Dust-Me-Selectors plugin for Firefox, although it looks through a page rendered in the browser, of course, not through a directory.

Answer 2

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

The Dust-Me-Selectors plugin is helpful, but on a page-by-page basis, lots of selectors will be unused... but not necs be invalid.

There's a few tricks I've used to help clean up.

One by one, insert some HORRID styling that you'll be able to spot immediately to determine if a selector is being used. e.g.

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

Anything that renders with a huge dashed hot pink border now... is an "active" selector. If you can surf most of your site/app without seeing it, then it is likely "dead".

(if your CSS code is "generated" you can optimize this to test with various colors at once, AND use generated content to prepend the "id" of the selector)

Another option if you use a generated CSS system... is to add a final property to your selector that sets say... a background image with a generated URL. e.g.

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

Then you simply surf your site/app for a while then check your web log for HTTP image requests... for any generated image URL that wasn't requested in the log... you've likely found a "dead" selector.

Answer 3

Selenium allows you to automate page testing and select elements via css selectors. If you accumulate the matches across the site you would be able to identify unmatched items.