CSS Underwear Series

This following is an intro to a 3 part series:

1. The Godfathers’ Boxers
2. Beanies to Speedos
3. CSS Under Where?

Before all the recent buzz about design and copy theft, I began snooping into various high-profile bloggers’ css files looking for the most common application and organization of css files. Although I wasn’t there to steal anything, it made me feel…almost dirty. As if I was looking through these people’s underwear drawers. Although posting my findings may feel like telling you who wears boxers and who wears briefs, I refuse to fall into this frame of mind. It’s in the name of discovery, and in the spirit of exploration, that I go where no man had gone before.

This actually all began with a discussion at work about frustrations with css and tableless layouts. I’ve been trying to organize some of our sites for search engine optimization so that the title and content info shows up as the first thing in the html and that header elements and top menus fall in below. CSS has made this task an easy one, and compositionally I feel this should be a standard. The main argument is that it’s hard to tell when editing the layouts what goes where and how to edit the individual page elements. Rather than focusing on the idea of pushing content to the top of a layout, we began talking about how tableless layouts made the css so long that it becomes unmanageable.

A quick look into the Jasongraphix sourcecode will reveal the messy underwear drawer that is my css folder. For the most part though, I have a 2 stylesheets for each theme of my website (if you can call them themes at this point). The 1900s css exists within the “/css/1900” folder. There you will find 1900.css and 1900layout.css. I use the main stylesheet to establish some basic text-formatting, link, and body rules, and to import the layout stylesheet. This keeps me from having to deal with the bastardized browsers who do not support css imports, and coincidentally also tend to eat css layouts like beer nuts. Within my layout stylesheet, I’ve become accustomed to separating my rules by predefined html entities, IDs, and classes. I try to arrange each item within those categories alphabetically. I apply these same rules to css files I create at work. But I began to wonder if this is really the norm.

Rather than Googling for the most widely accepted methods, I began my quest through the personal site css files of my favorite website designers. I know that personal sites are probably not the best indicator of work practices, but the results were an interesting look into the minds of genius. I’ll be posting my finds on Monday, Wednesday, and Friday of next week.