What’s the easiest way to create a standard-complaint, CSS-based site?

Wrap divs and spans around everything and create a style sheet containing that relies on browser bugs. The result, though, is not much better than the nested table, pixel-shim mess that CSS was supposed to prevent. The road of excess may lead to the palace of wisdom, but it comes nowhere near a good Web page.

An effective, standard-compliant page can be created by remembering three simple rules and one big caveat:

1. Respect the elements.
2. Be selective.
3. No one Web page will look the same everywhere.
4. Don’t let purity limit you.

Respect the elements

A table was once used to place boxes on a page; now it’s often redundant divs. A well-designed template should use divs and spans only as structural elements, not presentational ones. There are semantic differences between <div id="articleContent"> and <div id="redBox">; the former is the precursor of XHTML 2’s section element.

So how can a big green box be created at the top of a page? Use CSS to stretch, position, and otherwise style a h1, for example, as opposed to wrapping it in styled div. Similarly, when creating italicized text, there may be a better solution than <span class="italic">.

Be selective

Good mailing lists pride themselves on a high signal-to-noise ratio by carrying relevant and interesting messages. To increase the “signal” of any CSS, use selectors and don’t litter pages with classes (or, to a lesser extent ids). When tempted to use a class, read the W3C’s page on selectors and see what alternatives exist.

Even Netscape 4 can work with simple descendant selectors.

Nevertheless, classes do have their place: they are perfect for styling similar items on one page. As an example, on a finance-related page, cells containing a negative value could have a class of “loss” and be coloured red. Selectors, in this case, wouldn’t work as the cells may be unpredictably repeated on the page.

No one Web page will look the same everywhere

Within the CSS community, “CSS filters” and “CSS hacks” are used interchangeably. In this context, the latter refers to exploiting a browser bug to control the implementation of a CSS rule (i.e., the star html bug); the former, using a browser’s CSS support to do the same (i.e., the Owen Hack).

Accepting there is strength in diversity will help prevent many problems, after all, every visitor will see the same page display differently. There are times, though, when the mythical pixel-identical design is an absolutely necessity (i.e., a client demands it) and CSS hacks and filters may be the best way to emulate this.

Before using CSS hacks, ensure there is no CSS filter that would do the same job. By using filters (usually selectors) effectively on a well-designed template, many of the nasty hacks—and future compatibility headaches—can be avoided.

But…

There will be times when the technology can’t do what the design demands, and as the CSS Zen Garden aptly demonstrates, using non-semantic markup and CSS hacks is not always wrong.

Don’t feel guilty if there isn’t a viable alternative. Like most things, moderation is the key.