Underspecified CSS is the name I am giving this sort of code:

h2 span
{
	color: black;
}

I'll show you why this code is the bane of large sites.

Embedded emails

CSS in email is a completely different ballgame from standard web design, but provides an excellent example for today's discussion. My company sends out a weekly e-newsletter that contains something like the following code:

<h2 style="background-color: #008;">
	<a href="http://ecommerce.example.com/" style="color: white;">Cool products!</a>
</h2>

The email is working great in every web client and desktop client that we care to test in... except for standard-interface Yahoo Mail, which is displaying the links as black on dark blue. WTF? After a little inspection with FireBug, I determined that Yahoo is dropping a span tag into the link, like so:

<h2 style="background-color: #008;">
	<a href="http://ecommerce.example.com/" style="color: white;">
		<span class="blahblahblah">Cool products!</span>
	</a>
</h2>

...and that's being affected by the h2 span rule I mentioned earlier. Since emails are limited to inline styles, we can't override it. Even wrapping a span tag of our own (with styling) around the link text doesn't help, because Yahoo Mail puts theirs inside that. Finally, we had to swap out the h2 tags for h3 tags, since those weren't affected by their sloppy styles.

Global styles, too

Another example from my workplace has to do with global styles for unordered lists. Once upon a time, someone added something like this to the global stylesheet:

ul
{
	list-style: url(/images/right-angle-quote.gif);
}

Then every time some poor soul wanted a regular ol' list, they had to override that global declaration in the head tag of the page. No one wanted to remove the offending style, because god only knows what it was intended for in the first place. (How does this sort of code come to exist in the first place? Perhaps the original author had written some experimental (and underspecified) styles, then another programmer picked up the project from there and copied the CSS verbatim. That sort of thing happens in a production environment.)

Localize and classify

The solution to these "underspecification" problems (sloppy selectors) is to make judicious use of IDs and classes -- localize the selectors to certain parts of the page, and be as specific as possible with classes.

I'll show you what I think might work better in both instances. (Yahoo's use of a generic span tag is a separate issue -- a span tag with no ID or class is a bad idea to begin with.) Here's the kind of selector Yahoo could have used instead:

#sidebar-links h2 span.callout
{
	color: black;
}

• By beginning the selector with a region ID or module class, the author can rest assured that the styles won't "leak" into the rest of the page.
• Properly classifying the span tag (or other target element) ensures that generic markup in the same region is not affected.

A similar approach would have cleared up the unordered list issue:

#article-content ul li
{
	list-style: url(/images/right-angle-quote.gif);
}

In summary, by specifying your selectors as tightly as possible, you'll avoid a world of cascade trouble.