CSS Redundancy CheckerWhile I’m primarily a developer, I end up spending a lot of time working with CSS and other front end technologies. I’ve learned a lot about CSS, but I don’t use it enough to have really good habits and often end up with superfluous selectors and bloated code. So when Tom Armitage’s CSS Redundancy Checker popped up in my feed reader I was intrigued. Tom’s solution is simple, elegant, and reasonably quick. But it’s a command line app that requires ruby and some additional packages — not exactly newb (or lazy programmer) friendly. Since I was looking for an excuse to play with Rails a bit more, I decided to write a web front end and build an Online CSS Redundancy Checker on top of Tom’s code.

The checker asks for your stylesheet URI and a list of HTML pages to analyze. The parser scans the specified stylesheet looking for CSS selectors that are not present in any of the HTML pages listed. Since these selectors are not used anywhere, they can probably be removed from your stylesheet without causing any problems.

Before you get too excited, there are some caveats. The redundancy checker does not understand javascript, and may tell you that certain selectors are redundant simply because they don’t appear in your static HTML. If you use javascript to manipulate your HTML documents (e.g., by adding class attributes on hover, etc.) you should be aware of this problem. You may also have selectors that apply to only one or two HTML documents that are buried in some obscure location on your site. So be careful, and think before you delete!

At this point the CSS Redundancy Checker is fairly primitive, with limited input options and no real API. If there’s enough interest I’m willing to add features (e.g., a sitemap parser so you don’t have to input page URIs by hand). If you have any thoughts, suggestions, problems, feature requests, etc. please let me know in the comments. Otherwise, enjoy.