For the longest time, I’ve struggled with the CSS that styles this site. It has grown organically, which is a nice word that means “without thought”. It had gotten to the point where there were too many rules affecting too many elements, and I couldn’t make a change without some unpredicted part of the page looking very wrong. I could see the effect my changes had, but I couldn’t see why they did.

I was using Firebug, an awesome Firefox plugin that shows you the CSS in effect for an element. But I still couldn’t see the chain of causation that got me where I was. I was using a recent build (0.4.1), but it turns out that Joe Hewitt had been a busy boy, because version 1.0 of Firebug is now available.

The leap in version numbers from 0.4.1 to 1.0 was entirely justified. If you’d been using Firebug and liked the way it was going, you have to get 1.0, because it looks like Firebug times ten. The killer feature for me is the CSS panel which shows what styles are in effect for the selected element, including all of the inherited styles, and which rules are overridden. Using this tool, it was straightforward to see what rules were affecting my layout, and to clean things up.

But there are a ton of other tools in Firebug: layout visualizers, rulers, Javascript debugger, network analyzer, etc, etc, etc. It really is amazing what’s packed into it. If you’re doing any sort of web development, you need to Get Firebug.