A new tool to check Redundancy in CSS called "css-redundancy-checker"

There comes a point in every developer’s life when your realise the problem isn’t your work, but the tools you’ve got to hand. Toolsmithery is an important part of the job, and so I spent a few hours yesterday crafting a tool useful to any front-end developer.

The result is the CSS Redundancy Checker.

When you’re writing HTML, over time, your CSS files begin to fill up
a lot. If you’re working on a large project, you might even end up with
several people contributing to the CSS file, not to mention refactoring
each other’s work. The result is a directory full of HTML files, and a
very large CSS file.

What tends to happen is that not ever selector in the CSS file
actually applies to your HTML; many are rendered redundant by
refactoring, or by changes in HTML. But when you’ve got a 70k+ CSS
file, it’s not easy to check precisely which selectors aren’t in use
any more.

Enter the CSS Redundancy Checker.
It’s a very simple tool, really. You pass in a single css file, and
either a directory of HTML files, or a .txt file listing URLs (one to a
line). It then proceeds to look at each file in turn, and at the end,
list all the selectors in your css file that aren’t used by any of the HTML files.

That’s it. I’m pretty sure it’s accurate, and it should work with
most CSS files. Most of the magic isn’t down to me, but down to _why the lucky stiff’s marvelous Hpricot
HTML parser. The script itself is about 50 lines of reasonably tidy
Ruby. You’ll need Ruby, and Hpricot, in order to run it. There’s more
full documentation over at the Google Code site where I’m hosting it. Please add any issues there, or get in touch if you want to contribute.

Things it doesn’t do: listing line numbers of where the selectors
are. I wrote that functionality on the train this morning, but I can’t
find a way to make it 100% accurate, so thought it best to leave it out
- inaccurate line numbers are of no use to anyone. If you can come up
with a way that works, let me know. Also, at some point I might turn it
into a Textmate command. All in good time, though.

The need for the tool came out of a large project we’re working on at NPG,
but I felt it would be useful to pretty much any HTML developer. So
I’ve released it to the world. Let me know what you think, and do
spread the word. You can get it via svn checkout, for now:

svn checkout http://css-redundancy-checker.googlecode.com/svn/trunk/ css-redundancy-checker