Friday, July 6th, 2007

CSS Redundancy Checker

Category: CSS, Utility

Tom Armitage has written a simple tool that is immediately useful to anyone working with CSS. The CSS Redundancy Checker is a Ruby script that will take CSS rules, and a set of HTML files, and will tell you what you aren’t actually using:

css-redundancy-checker.rb [cssfile] [directory of html files OR .txt file listing urls to use]

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.

Posted by Dion Almaer at 12:31 pm

3.4 rating from 43 votes


Comments feed TrackBack URI

Awesome idea! All we need now is an online version. This would be hge for many developers. Who’s up for it?

Comment by Kanwal — July 6, 2007

Yeah that would be good. It’d be nice to have it built into CSSEdit, or Coda or something.

Comment by Ben — July 6, 2007

OK, and what about parts of the html page, that are dynamic – either using JavaScript or that are generated by server side scripts/applications? In one moment, all of the CSS rules don’t have to be used in html…
But I greee – it’s a nice idea :-)

Comment by el Mosquito — July 6, 2007

good idea, but better & more usefull if online. I dont use ruby…

Comment by softcodex — July 7, 2007

To clarify: it _will_ work with server-side generated code. Rather than passing in a directory, pass in a text file containing a list of urls you wish to check. The urls, when called, will be passed to the script in their full rendered state, meaning you can use it to test templated. But you’ve got to pass in the generated HTML, not the original templates.

Hence the list-of-urls solution.

As regarding “more useful if online”, well, maybe, but it’s quite slow, and it’ll be slower if people share it. And as regarding “I don’t use ruby”, well, get it. You don’t have to code in it – just install it, follow the instructions in the README, and run it from your command line. It’s really not hard. And you can always stick a request on the issue tracker if you run into problems.

Thanks for the interest, all.

Comment by Tom Armitage — July 8, 2007

Great idea. Keep up the good work.

Comment by Boris Kuzmic — July 9, 2007

I appreciate that it can handle templated code but can it handle javascript? For example, sIFR checks if flash is available and if so, adds a class to the body tag that activates all the sIFR css rules. Wouldn’t this tool miss that? Or what about HTML that is generated in javascript rather than on the server?

It’s a great idea, just wondering if it will be useful to me…

Comment by Tamlyn Rhodes — July 9, 2007

I was about to write a similar tool myself, but couldn’t find time. Gotta try this out. And yeah, an online version would be highly appreciated… Maybe a distributable version that people can install locally so that all developers in the office can use it…

Comment by Vasili Sviridov — July 9, 2007

I’d thought about it some time ago. I made a feature request for FireBug: [req] Unused CSS styles +solution (proof-of-concept code in JavaScript).

Comment by DPP — July 22, 2007

Leave a comment

You must be logged in to post a comment.