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
Matt | 18 Dec 2008
This *is* pretty slick. There’s Firefox extension that does this, as well: Dust-Me Selectors; I believe written by someone associated with SitePoint.
On a related note, does anyone know of a tool/script/extension that will do essentially the REVERSE of this? That is, scan a pile of markup and list all the class and ID attribute values that may appear? Perhaps for a single document, or a whole site tree?
I’m looking for something to hunt through a bunch of JSP code that I’m reticent to change by hand, but need to create CSS for. I’d like to discover all the class and ID values that are in there.
Matt | 18 Dec 2008
…oh, and I already know that the Web Developer Firefox extension will essentially *show* me the classes and IDs, but it’s a bear to look at, and it’d be nice if I could just get a list parsed out.
Anthony | 30 Dec 2009
For those who, like me, spent ages searching for the greasemonky version but found all the links were dead you can find it here http://userscripts.org/scripts/show/11074
Awsome work both of you!
30 Jul 2008
Trackback: The CSS Redundancy Checker | What did you mean ?