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.
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
----------------------------------------------- */
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.
Nice, makes me want to organize my files a little better. I have actually been putting a little bit of time into my CSS files, adding some header information (for copyright) and such. I’m starting to move all my CSS files to a server-side script format (ASP.NET) so that I can take advantage of optimization while at the same time giving the ability for server-side comments.
I also was struggling with Firefox on Mac placing my navigation on one of my sites a little too high (I am using relative positioning with a top value set). Since I have no idea how or if there is a way to deliver CSS straight to this browser (via CSS hacks), I used server-side browser detection to deliver a little rule to put my navigation in the proper place the stubborn Firefox on Mac.
It was sorta funny to do this because I can’t help but think of the days of old when you would sniff for Netscape and deliver a custom page for these guys. However, I think appending one little rule at the end of my scripted CSS file for certain browsers is quite a bit better than delivering different web pages based on browser version.
Sorry I got a little off-topic, but I got to thinking about it because I’ve been looking at different folks CSS a lot lately to see how they were organizing their CSS. Of the various sites, I found myself browsing Doug’s (Stop Design) CSS quite frequently this past few days. I love all those little hacks to deliver CSS exclusively to the various flavors of IE, talk about attention to detail.
I guess it depends on the project, but I don’t see the need to move all your css into server-side pages. If you wanted to though, I can see that it’d be pretty easy to just slap it into a web user control in .NET.
I actually just used Doug’s IE5/Mac Band Pass filter technique for a site that was having box model issues. Oh, how I love IE5/Mac!
Sure I don’t have to put the CSS in server-side pages, but why not? It allows me to dynamically generate my CSS so I can add/remove rules if I detect different browsers. That wasn’t my original thought it why I would move my CSS to server-side pages, it was more about optimizing the CSS but still having nice comments in the code (for server-side viewing). There was a discussion somewhere about this last week, and that’s when I decided I’d move my CSS to server-side.
The other thing that got me thinking about server-side is all the site theft that’s being going on in the last couple weeks. If the CSSis server-side, then I can check the referring URL of the page and if the referring URL is not my own website then I can choose not to display the CSS at all. Sure there are ways around it, but folks who steal CSS are typically not the type of people who have technical knowledge of spoofing a referrer.
Keep in mind that I did not enable this feature, but I *can* turn it on by un-commenting one line of code.
Take a gander at my CSS, I just threw together some fun server-side programming. It defaults to deliver an optimized version, but can show the formatted version if you ask nicely.
Man, I wish I felt as good about my CSS as you do. I feel like it just keeps bloating the more I need to add to it. It’s actually getting to be pretty high on my list of things to be tidied up 😀
Yea, I know how you feel. That’s the whole reason I started looking into CSS organization. There doesn’t seem to be a whole lot of it. Trust me when I say that your CSS is a better example than a lot of others.
Comment Content Deleted
Sorry for such a big comment(junk) on your webpage “http://www.jasongraphix.com/archive/2005/02/beanies_to_spee.php”. I guess i need to tell you that you have not put a check of what a visitor is writing here and of what length is he doing so. I could be posting a link to my website(free advertisement), or putting text of foul/sexual nature etc.
Rest you can do the needful. Thanks.
Yea Kaegie, I’m using MT Blacklist to prevent spam, which is now pretty obsolete. I don’t have a length limit for comments, but I can block people that leave long junk comments. 😉 Eventually I’ll upgrade my MT install and make my comments more secure…eventually.