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!
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.