The following is the 3rd 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 3rd 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.