The following is the 1st of a 3 part series entitled CSS Underwear. If you haven’t yet, you should go back and read the intro.
When I said I was snooping around the css of some of the web’s most high-profile bloggers, it should come as no surprise that I would be checking the link rel’s of zeldman and meyerweb dot com. These are the guys many of us owe our interest and satisfaction in web standards too. In many ways Jeffrey Zeldman and Eric Meyer really are the godfathers of css. Both have contributed selflessly to making standards-based website design a reality and have authored several books to spread their message outside the sphere of the internet.
With all the attention and notoriety associated with these trailblazers, I wouldn’t be surprised if they get hundreds of visitors a day looking behind the curtains of their personal websites to learn a thing or two about css. I say this because at some time or another during the years of existence these sites have seen, I know that I’ve been there. Now that I’m a little more educated in the zen arts, their css files are not nearly as intimidating, but there’s still a lot to learn from Mr. Zeldman and Mr. Meyer.
Eric Meyer – http://www.meyerweb.com
Eric’s site has a total of 7 stylesheets linked to from the homepage (if you count skel.css which is imported). The bulk of his css is located in new.css so I’ll spend a little time here to point out how he is organizing. With no commented titles or dividers on this page, the organization is not all that apparent. It looks like he has his classes and divs mixed together with no alphabetical sorting. At closer inspection, he has all of his generic rules at the top. Below that everything is grouped into blocks and ordered how it is applied on the page. He precedes every selector in each grouping by the groups containing block so that the rules are only applied within said block. Like so:
#main blockquote {font-style: normal; margin: 1em 1em 1em 2em;}
This to me seems like it could lead to some confusion, and redundancy if, say you wanted to use the same definition of blockquote in multiple places. I guess if that were the case, he would include it at the top of the css file as a generic rule. Regardless, I am just making observations on organization patterns for CSS files and Eric’s method seems to work well for him. To each his own bag.
Jeffrey Zeldman – http://www.zeldman.com
In contrast to Eric Meyer’s stack of linked stylesheets, Zeldman’s css is mainly confined to 1 css file simply titled 04.css with two variants (darker.css and lighter.css). No proliferation of sock hats here, just a simple title, a disclaimer, and off we go into his css.
/* Zeldman.com layout */
/* You may adapt elements of this CSS in your own projects, but
the unique combination of images, colors, sizes, typography, and
positioning ("the design") is copyright 2004 Jeffrey Zeldman and
Happy Cog Studios and may not be reproduced. */
Fair enough… Jeffrey’s css itself is grouped into some creatively insane category names. Category names that make me eager to meet Mr. Zeldman someday.
/* Primary layout divisions */
/* Typography */
/* Purely decorative, redolent of spring */
/* Forms follow function */
/* List frippery */
/* Haxies */
…and my personal favorite, “Cover one’s butt” complete with a buttski id and a butt class:
/* Cover one's butt */
form#buttski {
text-align: center;
padding: 0;
margin: 10px auto;
}
.butt {
color: #441;
background: #eed;
padding: 2px;
}
Beyond the categories, all selectors in Zeldman’s css are further organized by what appears to be the order in which they appear on his site.
Lessons learned from Eric Meyer and Jeffrey Zeldman: Keep it simple and wear them loose. Organization is definitely a priority, but there’s no reason to keep your code in class 4 lockdown. In addition, there’s no reason not to add a little personal flare to your personal css.
I think its more a code-reuse thing than an inheritence thing. I thinks its like when you have a block of code in function A. Then, if you need to do that same thing in function B, you’ll pull it out into it’s own function (C) and call it from A and B.
Not sure if that made any sense, sometimes I really hate the english language.
Admitting I know very little about css would be an understatement, but I think I get what Eric Meyer is trying to do. In OO programing you have a base set of classes, alot of times you set up a base structure of code that you can use later on. That code is then overridden by code specific to that project. It’s sorta hard for me to explain. It sounds to me like Eric Meyer setup his base structure at the top and then overrides things as needed at the end.
Yeah, I get what you’re saying. I need to lean how to better organize my css files. Esp. when I’m working with an ASP.Net project.
I like the idea of this series, it’s sorta at the teaser point right now… but it has the potential to be an often read series.
Now that I’m honing in on my CSS skills, maybe I should try to structure my files in some meaningful manner. It always seems like I’m just appending rules to my files…sigh.
Sometimes it’s difficult to see the difference between inheritence and code-reuse, but this discussion was helpful for me and may be for you folks too.
ASP.NET is no different than anything else. Be consistent across all project types.
That’s exactly how I feel about the series right now too Justin. I have my examples that I want to talk about for the next two posts, but I’m not sure where I want to go with it yet. The emphasis is on, and will stay on, organization of css code. The main theme is that even though everybody does things a little differently, there are always lessons to be learned in establishing your own rules.
I thought about posting that link after I read it Thursday because Dave did an Awesome job of explaining the pros and cons of Eric Meyer’s use of redundancy. For those who haven’t had a chance to read it yet, be sure to check out Redundancy vs. Dependancy by Dave Shea over at Mezzoblue.