A Cascade, But Not In A Good Way

The good thing about declarative languages like CSS is that they let you declare what you want the machine to do, leaving the details of implementation to the machine. "Put the narrow column on the left," you say. "Leave a one-inch strip at the top for a headline."

The devil, as always, is in the details.

What happens if two rules conflict? CSS has sensible rules about rules. If two rules both apply to the same situation, the winning rule is the most specific rule. That makes sense. It lets you say, "I generally want the text to be Verdana" and also "the headline at the top of the page should be set in Apex Extra Bold Italic Small Caps". And if two rules are equally specific, the later rule overrides the earlier one. Great.

The shoe pinches, though, when you find a small problem and fix it. Some piece of the page doesn't look quite right, so you add a rule to fix that piece. Now that piece looks right. Great! There was one thing they had forgotten: you just added a new, more specific rule. And, once in a while, that rule is goint to override a general rule you need to fix one of Microsoft Internet Explorer's CSS bugs.

And that's how I'm spending my morning. Thanks for asking.

Recommended Reading: Tantek Celik on CSS and the Pandora's Box Model