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

One might have though I had forgotten about the 3^rd installment of my CSS underwear series. It’s been 20 days and 5 posts since my last issue, but I’ve been thinking more than ever in the last week or so about css organization.

My original intention for this post was to highlight the fact that some people “go commando” in terms of css organization. These are people who are heralded as webdesign gurus, people who are looked up to in the web-standards world, but surprisingly have no rhyme or reason whatsoever in organizing their stylesheets. I was actually going to use these individuals as examples that sometimes it’s ok to just let it all hang loose. For some sites (especially personal ones) it’s ok to just slap in a new declaration or selector wherever it works for you. So what if you need to hit Ctrl-F every time you have to find the class you want to edit, right? Well, I’ve been realizing more and more in the last week that this is no direction to go in at all. I’ve actually been leaning more toward the “Speedo” approach - and longing for more organization in my own css files to make working with the design more efficient.

Part of the reason for both the change of direction of this post, and the delay, has been a project I’ve been investing a lot of my time in lately at work. Check out this demo. There’s a lot of things going on in there that I don’t have time to go through, but here are a few key points about the layout.

• The content is physically located at the top of the page. If you zap the stylesheets, you can see that top of the page is actually the “Full-Size Content Box” header. I’ve been trying to achieve this with most new css layouts I’ve been working on as I believe it will help search engine ranking to have the relevant content above any global site navigation.
• Everything on the page is wrapped in a “page” div and then divided up into a Header, Content Column, and Left Column. Despite it’s look, it’s really a standard 2 column layout with a header.
• Everthing in the Left Column, and Content Column is divided into “boxes”. These boxes consist of a top, content, and bottom div to create the affect you see, and they inherit their styling (width, background-images, etc.) depending on the div that they are located inside.
• Each “Box” can have a second class appended to it to apply one of five css defined background colors. These color classes (bluebox, redbox, orangebox, greenbox, & yellowbox) determine not only the background color of the box, but also the color of the text and styling of the links.

This is one of the most densly packed and interdependant css layouts I’ve ever worked on…so tossing css elements all over the place would have created a disaster. So, how did I do with the organizing? You tell me. I’ve got a main stylesheet that sets some basic rules and imports the layout stylesheet for capable browsers. In the layout stylesheet I have my generic html redifinition rules, a section for layout blocks, a section for “Box Styles”, and then my list of classes. I’ve taken into account a lot of the things I learned while writing the first two parts of this series. I have commented title and version information at the top of each sheet and aptly named commented dividers. I’m still following my old trend of organizing my css into Generic HTML Rules, IDs, and Classes, but I’ve added a few tweaks. I realized that most of my IDs were actually layout divs that end up being applied in the header or footer of the website. To aid in navigating these selectors, I organized them by the order in which they appear. I also cascaded them to show their level of depth. Because the “Box Style” classes are kind of redundant and stand on their own, I seperated them into their own section of classes.

I can see using this type of css organization (particularly cascading the cascading styles) being applied to a lot of other site’s that I’m working on as my stylesheets don’t seem to be getting shorter.

Wow! What a great show! Friday night Ames and I made a turn for the random and decided to try to get tickets at the door for Rascal Flatts and Blake Shelton at the O’Connell Center. Before the ticket line opened up, we were mingling around the will call line and found someone who had some tickets they wanted to sell. They had bought a set of great tickets, and then were able to get floor level tickets online. So, for a buck less than we would have paid for nose-bleed tickets, we got level 1 tickets right next to the stage.

Neither of us had heard of Shelly Fairchild, but she had a great voice and put on a good show as the opening act. I knew that I had heard some songs by Blake Shelton before, but I had no idea how many. If you’ve never heard him before, you should check out “Some Beach”, “Austin”, or “Playboys Of The Southwestern World”. Unfortunately, each one of those songs is on a different CD of his.

The reason everyone was there though (including us) was to see Rascal Flatts, and we were not disappointed. They are a great show to see live and I think we knew about every song they played. The stage set was amazing, and included a riser that put the performers (almost) within a hat throw away from us.

One of the funniest things to see during the concert was that people were actually opening up their cellphones and holding them in the air like lighters. At first I thought they were just trying broadcast the song to a friend on the other end, but then I noticed that there were greenish blue lights floating around all over the stadium. So, the next time you go to a concert, and hear a song that makes you want to hold a lighter up in the air, just flip open your cell phone.

On April 1st Google officially began beta testing Gmail, and it was some time during that week that I filled out their "Keep Me Posted" form. I waited and waited and heard nothing. Then, in May, an old friend offered me an invite. I was so impressed with the service that I began using it for all my email. It wasn't long till I had gmail invites to offer, and gave them out to anyone who wanted them. On the 2nd of February though, something odd happened, my number of invites (...and Ray's too apparently) jumped from 5 to 50. At this point I've long since forgotten about my request for gmail invites, but this morning on my work email address, I got this email:

Hi there,

Thanks for signing up to be updated on the latest Gmail happenings. We hope it's been worth the wait, because we're excited to finally offer you an invitation to open a free Gmail account! Just click on this link to create your new account:

http://gmail.google.com/(CENSORED) :)

Since last April, we've been working hard to create the best email service possible. It already comes with 1,000 megabytes of free storage, powerful Google search technology to find any message you want instantly, and a new way of organizing email that saves you time and helps you make sense of all the information in your inbox.

And here are just some of the things that we've added in the last few months:

- Free POP access: Take your messages with you. Download them, read them offline, access them using Outlook, your Blackberry or any other device that supports POP

- Gmail Notifier: Get new mail notifications and see the messages and their senders without having to open a browser

- Better contacts management: Import your contacts from Yahoo! Mail, Hotmail, Outlook, and others to Gmail in just a few clicks. Add phone numbers, notes and more. Even use search to keep better track of it all.

We also wanted to thank you. For showing us your support and for being so patient. And to those who have already signed up for Gmail, thank you for giving it a try and for helping us make it better. Our users are what have made this product great. So whether you're just signing up for your account or you've been with us since the beginning, keep letting us know how we can build you the best email service around.

That's it for now. We hope you like Gmail and will share it with your friends. We've got lots of cool new stuff planned and we can't wait for you to see our work in your Gmail accounts! Stay tuned...

Thanks,
The Gmail Team

So with Google finally offering gmail directly to those outside of the "Social Network" and giving it's users invites like they were gumballs, I wonder how long it will be till this thing goes public? In the mean time, if anybody wants a gmail gumball, I've got plenty.

Via Slashdot and Microsoft:

Well, it's official. IE7 will be available in beta for Longhorn (codename for the next version of Windows) and Windows XP SP2 as early as the summer time. It seems that the focus of this new version of IE is going to be on addressing security issues. What about inherent support for png transparency? What about extensibility in the form of user created themes and extensions? How about bookmarklet/favelet support? This is going to be sad.

• A Public Display of Affection?
• In Poorly executed Monotype Corsiva?
• Using two gallons of paint?

How could I go wrong? So, what do you say Ames?

As Valentines Day approaches, I'm beginning to think a lot more about just how lucky a guy I am. There are so many reasons why I'm happy to be forever committed to my wife. Yea, Ames is insanely smart, she can cook just about anything, she has a memory like a trap, and she is the most beautiful person I've ever met...but those things really aren't the driving force behind my love for her. It's the little details about Amy that get me...like the fact that she can move her eyes around independently of one another. Yes, this is a little known Amy trick that is particularly useful when she wants to convey that the person she is imitating wasn't the brightest person in the world.

I always thought this trick was a genetic thing, like being double jointed or having a connected earlobe. I've tried to do it before always to be told, "Nope, both your eyes are looking to the left now". Well, after a few minutes of professional training from my wife I'm happy to report that I too can now move my eyes independently...if I can prevent myself from laughing.

She's the greatest!

The following is the 2^nd 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.