Finding CSS problems with binary search

Posted by Luke Francl
on Friday, October 03

I’m trying to integrate the YUI Rich Text Editor in to an application which has some CSS rules that aren’t playing nice.

But how to find what’s causing the problem in a 1700 line CSS file?

Binary search to the rescue!

Binary search (see also this introduction from Princeton) is a divide-and-conquer algorithm for finding an item in a sorted list. On each iteration, it cuts the total search space in half.

Binary search diagram

It can also be used as a heuristic tool for finding software defects. The bisect command in git and Mercurial allows you to do a binary search through your code to find the revision where a bug was introduced.

Lately, I’ve been using it to find CSS problems.

Here’s what I do. I select half the file (roughly—obviously, you need to break it after a CSS expression), and delete it. Then I reload the page.

  • Problem still there? I know the problem is in the half I didn’t delete.
  • Problem fixed? I know the problem is in the half that I just deleted.

Restore the file, and delete the next subdivision. Within just a few iterations, you should be on a specific CSS rule that’s causing problems.

Anyway, maybe it’s old hat to most people, but I thought it was kind of cool.


Leave a response

  1. OlegOctober 03, 2008 @ 03:37 PM

    I have a hard time trying to imagine how that would even work. Normally Firebug is good enough to track down css related issues.

  2. Luke FranclOctober 03, 2008 @ 03:40 PM

    I use Firebug, too, but when I have no idea why something’s not working (and know that taking out the CSS file entirely makes it work) this technique is helpful.

    For what it’s worth, I don’t really consider myself a “CSS guy”. I know enough to hack my may through it, but I’m not a designer. Maybe that’s why I like this hack-n-slash way!

  3. Ben AtkinOctober 03, 2008 @ 06:35 PM

    I learned to use binary search for debugging from How to be a Programmer: A Short, Comprehensive, and Personal Summary . There are lots of good tips in there.

  4. Sam FigueroaOctober 04, 2008 @ 02:15 PM

    I don’t usually have to concern myself with CSS but I guess this is a good tip in general for dealing with source. I’ll try to keep it in mind next time I come across a intricate problem.

  5. Erik OstromOctober 05, 2008 @ 03:13 AM

    This is something I do, but I hadn’t conceptualized it as “binary search” before. Clever.

    The problem is, of course, that deleting half your stylesheet can throw the whole page so far out of whack that your original problem is no longer relevant or recognizable. But sometimes it works.

  6. Ed SpencerOctober 06, 2008 @ 05:04 PM

    This is a good approach which also serves me well, especially when dealing with stylesheets written by other people – with which I am naturally unfamiliar. The binary search analogy is something I’d thought about too – in fact the concept pops up quite often while searching for bugs.

    In my experience using this approach with the Firefox Web Developer toolbar is much faster than refreshing the page each time. With that extension you can call up all stylesheets attached to the page in a tab to one side, and edit it live on the page.

    Even better is that each stylesheet appears in a separate tab, so if you split your stylesheets into separate files (you should! Don’t forget to use the :cache => true option in rails to concatenate them back into one in production mode) you can delete an entire stylesheet (temporarily) and judge its impact.

  7. Luke FranclOctober 06, 2008 @ 07:19 PM

    Ed, thanks for the tip on the Web Developer toolbar. I use it, but I didn’t know it could do that.

    And, yup, this is a stylesheet written by someone else, so I’m exploring what goes where when I have been doing this.