Essential, time-saving CSS tips for the beginning web developer

Was talking to our webmaster at the RRStar in Rockford earlier about CSS and 'best-practices'. The conversation took me back a few years to when I first started writing table-less CSS layouts. I found myself wishing someone had explained these few simple concepts to me, as I now realize how much time I might have wasted writing 'bad' CSS :)

Validation. The first (and only) step towards CSS compliancy. Should always check your code while developing.

Shorthand. A recent infatuation of mine is ensuring I use shorthand properties at all times. Using shorthand for background, margin, padding, border and font has surely saved me hours of strain on my fingers. Only downside is that I've recently begun having dreams of 'top right bottom left'.

Consolidation! The comma is my new best friend. Consolidate your similar declarations as much as possible. Instead of this:

class1 {font-size: 12px;}
class2 {font-size: 12px;}
class3 {font-size: 12px;}
class4 {font-size: 12px;}

do this:

Consolidation lends its hand to inheritance. When you get into more advanced CSS, inheritance can be both a godsend and a nuisance. If you didn't write the code, you could have hours of fun digging around finding out why there's 5px of extra padding within that painful div.

If you did write the code, you can rest assured any paragraphs within that special div of yours get that nice pink, blinking text.

'#'s for elements referenced with ID's only. No need to give things ID's unless you're referencing them in your JavaScript. If you use ID's without thinking about the consequences, you may find yourself with a duplicate, which doesn't make the W3C very happy.