The Zen of CSS design

From: http://www.robertnyman.com/2005/05/02/the-zen-of-css-design-a-review/

Since most of my readers are very interested in CSS and many of you know who Dave Shea and Molly are, I thought I’d try and write a review of their the Zen of CSS Design book, that I just finished reading. One reason is to give my personal view on it, and another is to maybe give you some idea if this book is for you or not.

First, I just have to say that in the “About the authors” page, it’s hilarious that (to me) Dave looks like Molly’s boy toy…

With that aside, let’s start from the beginning. I love the cover and the format of the book. Glossy colored pages are so much nicer than the developer books I usually read. When it comes to the format, I’m not sure if the credit should go to this book, or to the New Riders publishing company (I don’t know, since this is the first book from New Riders that I’ve read), but either way, I love it.

The book is about the incredible CSS Zen Garden web site, which is a showcase for using the same well-structured XHTML file for over 160 different designs, all solely based on the content of their corresponding CSS file. The web site is an invaluable tool to show people what can really be accomplished with CSS, and this book covers some of the different designs’ code, color, images, typography, concept etc.

Maybe this is just me, but I felt that the book is mostly written too much from a designer’s point of view. And to be fair, designers are the ones behind the different designs, but I have never myself, or met any other that has, had the role of being the designer and the one coding the CSS. In “my” world that’s two different roles, normally an AD and an Interface Developer. I don’t know what it’s like in the rest of the world, but here in Sweden the word “Web Designer” has a bad ring to it; to me it symbolizes the first developers in the beginning of the commercial internet era, the ones that were hard-coding the pages and doing everything from the design and copy writing work to the interface coding.

With that said, I have to admit that some of the topics in the book are things that will (probably) never apply to my professional role and I won’t browse through those chapters as a reference in my daily work, but they were still interesting to read one time.

Getting back to the format of the book: every chapter has small boxes in the margin, usually named “tip” or “note”. They turn out to be links to very useful web sites with solutions to and ideas about handling different scenarios. Personally, I’d wish that the content of some of those linked web pages were discussed in the book (some of them are mentioned in the text, but not much more). I think the book would’ve been more interesting if they had been a part of it, instead of only focusing on having a different CSS Zen Garden design as a starting point all the time. On the other hand, maybe that’s the whole point of this book. I don’t know. But to me it could’ve been the ultimate CSS/interface developing book, but now it’s “merely” a guide to the different designs in the CSS Zen Garden.

The chapters are:

1. View Source
2. Design
3. Layout
4. Imagery
5. Typography
6. Special Effects
7. Reconstruction

I think it started off great with the View Source chapter, but after that it just wasn’t as intriguing. Bits and pieces of the other chapters were interesting per se, but not extraordinary. The last three chapters got more interesting though, starting with chapter five, Typography. I don’t regard myself particularly skilled in that area, so I gained something from it. Then chapter six and seven, Special Effects and Reconstruction, respectively, had some nifty things to pique one’s curiosity.

The Closing Thoughts was one of the better parts of the book, with good advice and introducing a link to Dave Shea’s CSS Crib Sheet.

However, there are two things that the book promotes (in some places), which I don’t like:

Pure CSS Menus

I can live with changing the look of a link with :hover, since it’s more of a state, but I think creating menus belong in the behavior layer.
Take, for instance, this sentence in the part about the Tulipe design:

…you can always default to JavaScript for dynamic menus. There’s nothing wrong with that, but CSS allows you to do it more elegantly…

It’s exactly this general attitude, that it’s so easy and elegant to do it in the CSS file, that I personally don’t like. I express my opinion more detailed in my Three separated layers, capisce? post.

Browser elitism

The book is full of mentioning things that won’t work in IE on a PC, and I agree that it’s important that all of IE’s shortcomings are brought up. I also like that it is being addressed in how to write the CSS code to handle them. The thing that bothers me, though, is that there are several designs covered in this book that delivers more stunning designs and effects to more competent web browsers, like Firefox and others, while serving a more bland version to IE.
That, to me, is showing a browser elitism attitude, and that way of approaching things is exactly how IE got away with its different proprietary techniques that later resulted in people writing code that only worked in IE. Sure, in the book’s case, the extra effects are written according to the W3C recommendations, but personally I think that one should do it’s best to deliver an equal design and its effects to all of one’s targeted web browsers.

Coding wise, as in all books, there are some minor flaws and typos that aren’t even worth bringing up. One thing, though, that got to me, was a part where catering to IE 5.x incapabilities of centering content with text-align alternatives, instead of the correct way with using width and margin:0 auto;, is refered to as a hack. The code:

body{
text-align-center;
}
#container{
text-align:left;
}

Using text-align in a clever way is not a hack to me. The Box Model hack is a real hack. Maybe I’m just nitpicking, but I think its a vast difference between a smart, validating and correct solution and an actual hack. Another thing:
In some chapters, especially in the last one, there are numerous places with sentences like:

If you go to the web page, you can see the full CSS…

Sure, but what’s the point of buying the book then (except for the explanations)? I understand that the different chapters can’t have CSS code running page up and down, but it would’ve been nice with an appendix of the different CSS files, to get a feel of the whole structure (and not having to resort to a computer, while sitting out in the Spring sun and reading…).

All in all, despite my criticism above, I do like the book. It’s a good read, but not as amazing as I had hoped for. Too much focus on the design, and to little of solving problems all the way, discussed from every angle. Maybe too many designs covered instead of focusing more thoroughly on fewer ones?
However, I’m convinced that many people will gain a lot from reading it, and it shows off some cool CSS.

PS. A little bit over a month ago, Tommy wrote a post about this book and some of his opinions about it. DS.