The following is the 2nd of a 3 part series entitled CSS Underwear. If you haven't yet, you should go back and read the intro.

Last week I took a look into the loose "boxer-style" css organization of Eric Meyer and Zeldman. These Godfathers of CSS have earned the respect of and helped establish the world of web standards. This week however, we take a sharp turn away from casual seniority to look at the strict css organization styles of Douglas Bowman and Jason Santa Maria. If last weeks crew was Team Zissou, then this pair is doing things Team Hennessey style.

Stan and Zorthron

Jason Santa Maria has been highly acclaimed for the Aged Aesthetic and Veinity(?) of his personal site, jasonsantamaria.com. You would think from his design super-powers that he's an artistic-type. You might then think that he wouldn't consider something as meticulous as css organization a worthy cause. Well, in that case, you'd be wrong. JSM's css files look as though they've been through TLC's "Clean Sweep" with categorically arranged segments separated into a linked stylesheet, and continued into his imported stylesheet.

Each of JSM's stylesheets start with an informative header:

/* 

-----------------------------------------------

  jasonsantamaria.com

  oodles of styles

  updated 11.28.04

----------------------------------------------- */

The divisions that Jason sets for his css files are much more self-explanatory and purpose driven than Zeldman's and help break his code into more manageable pieces. Page Structure, Links, Masthead, Nav, Titles, Blog, Commentary, Lists, Forms, Calendar, and Misc make up the divisions for Jason's imported stylesheet. He also uses a divider on top and bottom of the category name to make the dividers easier to spot while quickly scrolling scrolling through the file:

/* 

-----------------------------------------------

  Page Structure

----------------------------------------------- */

Douglas Bowman of Stopdesign Stopdesign by Douglas Bowman has long since been one of my favorite personal portfolio sites. Doug seems to have a firm grasp on all of the elemental facets of design. His use of color, space, line, and texture in the layout of Stopdesign represents a level of design confidence unseen in the majority of personal designer sites. By creating a "bleached" theme for his website, Douglas proved that his design and layout could stand alone without the aid of color.

In keeping with his firm control of design concepts, Doug's css files are by far the most complex, and most well organized of all the sites I analyzed. One look at his master style sheet and you'll appreciate the lengths he's gone to make IE/5 (both mac and windows) bend to his every whim. He has gone to great lengths to separate css files for each of these stubborn browsers with a few descriptive comments like this:

/* IE5/Mac freaks out with border changes on 

   hover within floats, so we remove them and 

   add back in the normal underline for hover

----------------------------------------------- */

The painstaking attention to detail doesn't stop there. Douglas' base.css file is over 1200 lines long, and much like Jason Santa Maria's method, is divided into detailed categories:

/* Links

----------------------------------------------- */

/* Header

----------------------------------------------- */

/* MainNav

----------------------------------------------- */

/* Page Structure

----------------------------------------------- */

/* Headings

----------------------------------------------- */

/* Log

----------------------------------------------- */

/* Comments

----------------------------------------------- */

/* Tables

----------------------------------------------- */

/* Calendar

----------------------------------------------- */

/* Search & Results

----------------------------------------------- */

/* Lists

----------------------------------------------- */

/* Footer

----------------------------------------------- */

One interesting note about Douglas Bowman's css files is that the majority of his selectors have only one or two declarations. The longest list of declarations I spotted was on the ID logo, with 11 properties. Even so, it seems he has a healthy balance of dependent and redundant css use.

I want to note at this point that I am obviously not getting too deep into the technical aspects of css organization. The main lesson that I learned from the css files of these two individuals is that segmenting css files categorically provides a much more scalable solution to css organization than alphabetically sorting the type, class, and ID selectors as I have been doing.