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
And many thankyous to you, Mr Armitage. I’ve wanted this for years. < runs off to use on that big NPG project />
Great idea for a tool, and very useful - I don’t suppose anyone has been good enough to get it up and running on a public website so that we don’t have to try installing it ourselves?
If I get chance, I may try doing that myself, if that’s allowed in the MIT licence?
That is pretty sweet, but what about CSS classes that get dynamically added via JavaScript for unobtrusive JS functionality? It would be great if you could feed an extra object tha t has all those in it to avoid deletion.
omg, I praise you!
Havn’t tried it yet but this seems great. I wish there was on online version so that it would would on projects using .NET and PHP.
Rob: Please write a comment here again if you manage to put the tool online.
[...] 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. [...]
Doesn’t work.
mbp:~/rails/css-checker rob$ ruby css-redunancy-checker.rb mrdoe.css urls.txt
/usr/local/lib/ruby/gems/1.8/gems/hpricot-0.6/lib/hpricot/builder.rb:11: warning: `&’ interpreted as argument prefix
Parsing all html files within urls.txt for selectors in mrdoe.css…
————-
Parsing http://www.mrdoe.com/
Usage: css-redundancy-checker.rb [cssfile] [directory of html files OR .txt file listing urls to use]
mbp:~/rails/css-checker rob$
Oh yes. Yes, yes, yes. Yes. That is a good thing. *ah* That’s like drinking chocolate milk. Did you also post this to the TxD recipes page?
I knew someone would get around to building this someday. Very useful, Thanks!
Just what the doctor ordered. I wonder why no-one has thought of this before? Great idea. Sometimes css files become so bloated, but I’m concerned that deleting rules with have an adverse effect on some obscure page in the site that I’ve completely forgotten about.
I wonder if this functionality could be biult into something like Firebug–orphaned css.
Thanks for putting this up!
[...] Infovore » The CSS Redundancy Checker (tags: css design webdev programming ruby) [...]
really great tool! I didn’t try it out, but if it works, much thanks to you for it!! :)
[...] The CSS Redundancy Checker - Limpia tu CSS de estilos que no usesinfovore.org/archives/2007/07/06/the-css-redundancy-checker/ por CristianDeluxe hace pocos segundos [...]
[...] CSS Redundancy Checker - This nifty tool checks your CSS file against a directory of HTML and lets you know which selectors are no longer being used. Useful to keep your CSS clean and lean. (via Vitamin) [...]
[...] The CSS Redundancy Checker (tags: bestpractices handpicked tools css webdev) [...]
@Rob Have you tryed adding require ‘open-uri’ on a new line after require ‘hpricot’
This fixed the problem you are having for me. Is this a bug?
Works great now…
[...] test 07/07/2007 Infovore » The CSS Redundancy Checker [...]
That’s a big bug, sorry. I orginally had open-uri in there. No idea how it got removed. If you checkout/update the code again, it should work.
Apologies for the problem. Please list any bugs on the Google site - it’s the best way for me to track them.
[...] The CSS Redundancy Checker Filed Under CSS [...]
I’m really surprised that Dreamweaver doesn’t have this built into their reports or in form of some sort of checker. TopStyle Pro has this functionality.
[...] Tom Armitage has built a simple tool he calls The CSS Redundancy Checker. Discover which CSS selectors are no longer used in your HTML documents. (via CSSBeauty) [...]
Hi, I just happened to need this sort of functionality today, but didn’t want to install Ruby and Hpricot on my work machine (it’s not entirely mine), so I wrote a Greasemonkey script that logs unused CSS classes to the Firebug console.
Yeah, it’s pretty specific, but I figure some other web developers would have the same toolkit (and I’m mostly just making it for myself). It’s Available on my blog. ( http://blog.workingidea.com/article/6/todays-gizmo if urls are blocked)
[...] Infovore » The CSS Redundancy Checker Useful-but-dull again, a means of working out what CSS selectors are no longer in use in a given page or pages. (tags: css redundancy tools webdev) [...]
[...] 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. [...]
[...] Infovore » The CSS Redundancy Checker (tags: css tools) [...]
[...] So the CSS Redundnacy Checker has done a fair bit of traffic recently. Wow, etc. I hope it’s turning out to be useful. I’ve committed a few minor fixes, and there could be more improvements to come thanks to some useful feedback. I’ll be getting in touch with people about it over the next few days, I hope. [...]
[...] IespÄ“jams, ka kÄdam varÄ“tu noderÄ“t CSS Redundancy checker skripts, ko es atradu Inforve blogÄ. JÄpabrÄ«dina, gan uzreiz, ka tas ir rakstÄ«ts Å¡obrÄ«d modernÄkajÄ valodÄ (Ruby) rakstÄ«ts skripts un lielai daļai tas varÄ“tu arÄ« neinteresÄ“t. VarbÅ«t puiÅ¡i no vietÄ“jÄs ruby komÅ«nas palÄ«dzÄ“s tikt galÄ. A simple script that, given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML. [...]
[...] Ein solches Werkzeug habe ich mir schon immer gewünscht, der CSS Redundancy Checker prüft ein Stylesheet anhand der dazugehörigen HTML-Seiten auf überflüssige Anweisungen. Davon gibt es mitunter reichlich, nach einer anstrengenden Entwicklungsphase oder wenn das Projekt schon etwas länger läuft. Das CSS-File wird immer dicker und enthält eine Menge Einträge, die nicht mehr benötigt werden. Leider ist die Erst-Benutzung des Scripts wenig komfortabel. Man benötigt den HTML-Parser Hpricot und Ruby. [...]
[...] CSS Checker [...]
[...] Here is a fantastic little utility that parses a CSS file and a listing of documents, producing a list of the CSS elements that are not in use. [...]
[...] CSS redundancy checker - http://infovore.org/archives/2007/07/06/the-css-redundancy-checker/ [...]
[...] Infovore » The CSS Redundancy Checker (tags: css webdesign html) [...]
[...] The CSS Redundancy Checker - every now and then you find a tool that’s just money - here’s one of them… [...]
[...] CSS Redundancy Checker Alas, it requires Ruby (tags: css code tools redundancy programming free) [...]
[...] The CSS Redundancy Checker A great tool for when your CSS starts to suffer from bloat. Feed it a CSS file and it will hand it back all clean and shiny. [...]
[...] Infovore » The CSS Redundancy Checker—A tool that combs through your site’s CSS+HTML and tells you what bits of your CSS you are no longer using. Helps you slim down that CSS file. [...]
[...] Infovore » The CSS Redundancy Checker (tags: css tools redundancy webdev web) [...]
[...] Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for2007-07-20 [...]
[...] While 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. [...]
Hey, I just put together an online redundancy checker using Tom’s code. You can check it out at http://services.immike.net/css-checker/
Let me know what you think.
[...] Infovore » The CSS Redundancy Checker (tags: css code jquery programming) [...]
[...] Я разработчик и трачу много времени на работу Ñ CSS и другими Ñовременными технологиÑми. Я знаю много про CSS, но Ñ Ð½Ðµ иÑпользую Ð·Ð½Ð°Ð½Ð¸Ñ Ð´Ð¾Ñтаточно, чтобы иметь по-наÑтоÑщему хорошие привычки и чаÑто заканчиваю Ñ Ð»Ð¸ÑˆÐ½Ð¸Ð¼Ð¸ Ñелекторами и раздутым кодом. ПоÑтому когда CSS Redundancy Checker от Tom Armitage забраковал мой фид ридер, Ñ Ð±Ñ‹Ð» заинтригован. Решение Тома проÑтое, Ñлегантное и очень быÑтрое. Ðо Ñто приложение Ð´Ð»Ñ ÐºÐ¾Ð¼Ð°Ð½Ð´Ð½Ð¾Ð¹ Ñтроки, которому требуетÑÑ ruby и неÑколько дополнительных пакетов. Ðе очень-то дружное к новичку или ленивому программиÑту. Так как Ñ Ð¸Ñкал оправдание, чтобы поигратьÑÑ Ñ Rail побольше, Ñ Ñ€ÐµÑˆÐ¸Ð» напиÑать web мордашку и поÑтроить Online CSS Redundancy Checker , оÑнованный на коде Тома. [...]
[...] Tom Armitage of Infovore has built a CSS Redundancy Checker that will scan a CSS file for selectors that are not used by any HTML files in a specified directory or URI. [...]
Thanks! I will use now! :D
[...] feel better, believe me. The idea is so obvious, I wonder why nobody came up with something like The CSS Redundancy Checker a long time ago. IMHO, the work of a [...]
Great idea!
Tried to use http://services.immike.net/css-checker/
Seems to fall apart if you have .php pages
bummer
[...] The CSS Redundancy Checker [...]
I am writing this from the future. Thank you. This was just what I told somebody *must* exist today, and I am glad they found it. It had to be you in retrospect ;-)
[...] The CSS Redudancy [...]
[...] mentioned the CSS Redundancy Checker here back in July and Dust-Me Selectors does much the same thing — it checks for unused CSS [...]
[...] CSS Redundancy Checker is for that behemoth CSS file of yours that you know is out of date — you pass it a directory [...]