Ever worked collaboratively on a project with a fair amount of CSS? How about with someone who can't seem to follow some simple conventions and creates a cluster of mind-numbingly complex code? Here's my personal list of some CSS coding pet-peeves.

1. Basic formatting, folks...

You indent your PHP/ASP/HTML/JS right?  Why not do me a favor and show me a little organization in your CSS as well. When scanning several hundred lines of CSS it is super-nice to be able to scan quickly.  Oh yeah, comments help too.

/* Top Callout */            .top_callout { float: left; width: 500px; }           .top_callout h1 { color: #000; }           .top_callout p { padding: 15px 0; }           .top_callout a { color: #666; }            .top_callout a:hover { color: #999; } 

Note the progression? I can quickly scan to find the top-level element, then work my way down, even note the :hover state is indented just so it's obvious.  Yeah, that's a comment too, helps me with some plain-english relation to find what I'm looking for.

2. Over-classing / Over-IDing

This one always gets to me. Notice the example above - CSS has this great effect that actually is indicated right in it's name - CASCADING.  That H1 really doesn't need it's own class. Right, there are certain circumstances where you'll be reusing that style throughout your site, but then bring it outside of it's parent and do it right.

Also, along these same lines - you've heard this a bunch, but clearly some folks don't get it yet - an ID is different than a Class.  ID's are single identifiers (like your name) and Classes are properties (like your job title).  You may have multiple job titles, but you've only got one name.

3. Multi-line (though debatable, not always neccesary).

I'm a single-line guy, that's something you can choose to fit your needs/style, but unless you have more than three properties let's go ahead and try to keep it on one line, okay? It's just more scanning when I'm trying to find something quickly.

4. FONT

Okay, which is cleaner, this:

font: normal 12px Arial, Helvetica, sans-serif; 

Or this:

font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal;

I think this one is clear enough.

5. TRBL Trouble

Top, Right, Bottom, Left  == TRBL

Again, this may just be personal preference, but it seems to me that when you're working with padding or margin, this:

margin: 10px 5px 10px 15px; 

Is a lot easier to quickly modify than this:

margin-top: 10px; margin-right: 0; margin-left: 10px; margin-bottom: 15px; 

Hell, it can even be shorthanded if your top-bottom and/or left-right porperties are the same. For those of you who only declare what you need to (i.e. just top or right, or something like that), stop! Isn't it safer to just be specific and avoid inheriting issues from other declarations?  Especially in a world still plagued by IE6?

In summation...

Be aware that you may not be the only person working on your stylesheet. Simply trying to focus on organization, formatting, and several other very simple concepts can take a distaster and make it into a dream for anyone else who works on your code. It also will help you when your working on it, and if you ever half to dive back into it weeks, months, or years (ha!) down the road.

I'm a firm believer that you should develop your own coding style and your own techniques, but dirty code is dirty code.  I'd much rather spend a few minutes figuring out how your conventions work than a few hours sifting through your code and hackyslashing things to try to fix a small design element.