Zen and the Art of CSS

This is an article about CSS and HTML, and the on-going debate between CSS positioning and table-based layouts in HTML. As ASP.Net developers, we get handed a graphic design for an application, and are expected to translate that into HTML output. That means placing all of the elements -- graphics as well as text and data -- on the pages of that application.

The History Lesson

When I started in the business, there was no expectation that designs would be translated into pixel-perfect HTML output. Web pages weren't expected to look like their print counterparts. Everything looked pretty dull.

It wasn't long before Netscape threw us all a bone with the TABLE tag. In short order web developers had worked out how to use tables to place anything anywhere on a page. Pixel-perfect layout was possible, and designers started creating the oh-so-beautiful web designs we have all come to expect from the web.

CSS came along soon afterwards, though it was more bark than bite at first. The first browsers that supported CSS didn't really provide the support needed to move away from tables. But that soon changed, and CSS has finally become a viable replacement for table-based layout.

Or so we've been told...

The Debate

Over the past few years I've worked on a handful of very different projects, and I've had to choose on each of them whether I'd use CSS or tables for layout. I've gone back and forth. I realize that CSS promises the separation of content from layout, which is a very nice ideal. But I've also worked with a lot of different designs, and different requirements for how page elements expand, fill the space around them, and align with each other. Each of these issues challenges the web developer in different ways. And when it comes down to it, tables always seem to work. They work really well.

So here's the question: Which is better: CSS or tables? Is it worth it to sacrifice the ability to do pixel-perfect layout in exchange for an idyllic ability to separate content from layout? Is that sacrifice even necessary, or can CSS provide pixel-perfect layout?

The Zen

As I said, I've gone back and forth. I've seen the beautiful code that's possible with CSS. I've seen the perfect layouts that tables provide. But now I've started to see the light: pixel-perfect layout is possible with CSS.

It's not easy. It's not obvious. At times it's not intuitive. And there are still some layouts that are difficult to achieve. Cross-browser compatibility is still an issue (and always will be, so I quit whining about that a long time ago).

But there are some excellent guides available. There are a whole lot of really bad ideas out there, too. In fact, there is more bad advice available than good. Here are some pointers to good advice:

First, you have to understand the HTML behind a good CSS layout. It's not as stripped down as a purist might like. Instead it provides a set of "hooks" into the content that the CSS can grab onto to provide proper layout. The best example I've seen is CSS Zen Garden, which is where my path to enlightenment started. Take a look at their HTML (view the source). The way their content is marked up creates a very flexible foundation for easy CSS positioning.

Second, you have to understand some of the fundamentals of CSS. The "position" declaration is perhaps the most important of all CSS declarations. A full understanding of the difference between relative and absolute positioning of an element makes all the difference in your use of CSS. Until I really understood this concept, CSS was a huge frustration for me. I learned all I needed to know from the explanation provided by the Dutch guy at Quirks Mode.

The next fundamental you need to understand: the "float" declaration. I used it way too much, and never really grasped the issues it introduces. Every time I thought it was the solution, it just caused more problems than I could handle. I had to spend a lot of time with the Floatutorial to realize how and when a float should be used.

The rest of the fundamentals include the box model, quirks mode and the doctype element, and multi-column layouts. I've included links to articles about each of those topics for your enjoyment.

Finally, you need a set of best practices for CSS. You need to establish a pattern that works for you. It should include methods for addressing the most prevelent issues with CSS-based layout (each of the links above help with one or more of these issues). It should answer the persistent questions like:

• How do I structure my HTML?
  
• How do I structure and organize my CSS?
• When do I use a class instead of an id attribute in my HTML element?
• How do I get my content to flow properly within the page?
• How do I get my containers to expand properly?

I'm still working out the kinks in the CSS practices I'm following. I'm still getting the hang of some of the quirks that come up when I'm using the float declaration. But I'm seeing real success, and no tables as far as the eye can see. It's exciting. It's enlightening. Yes, yes: very zen.

Ss.