Okay, I'm going to take a bit of a detour here from the "series-in-a-series" that I've been doing to quickly blog about an invaluable CSS trick that every designer needs to use as often as possible.

So here's the scenario: You have a blog that's going to have pictures in it.  The thing is, you want to be able to float the images either to the right or to the left with some margins applied.  Oh yeah, you also want to have, say, seven different border-color options.  And did I forget to mention that you also want different padding between the image and border?

What to do, what to do?  When I first started, I would have sat down and mapped out a class for each "scenario."  For example, for the left-blue-2px-bordered option, I would have created something like "img.leftbluetwoborder."  While this will, of course, work, it's not usable.  Who can remember "leftbluetwoborder", not to mention the 23 other similarly named classes?  So what's the alternative to this terrible mess?

Enter what I call "class overloading."  What is this?  Simply, it is applying more than one class to whatever you're applying classes to.  So if I have an image with "class='myimage'", with class overloading I could easily do this: "class='myimage left blue two'". 

What have I done?  Well, first off, I've made a darn cool image border.  But more importantly, I've made my classes much more flexible.  No longer does one class have to try to account for all the rules to get a specific desired result.  Rather, with this method, I can group CSS classes to achieve an extremely versatile result with probably less code and much easier-to-remember class names (well, at least I think words like "blue" and "left" are easier to remember than "leftbluetwoborder"…).

But also, this technique reinforces the whole point of CSS, the "cascading" part.  When I limit classes to extremely general functions (like making things blue), I am forced to rely on other elements that do other things (like give padding) to achieve results other than blue.  But again, as each class is taking on a specific, but flexible role, this is good because as I generify (should totally be a word) what CSS classes do, the more powerful they become.  And ultimately, I have to write less code to achieve more efficient results. 

So there you have it.  Start overloading classes and discover just how awesome this invaluable technique can be. 

More In This Series 

On Becoming a Better Web Designer, 6(a)

On Becoming a Better Web Designer: Default CSS

On Becoming a Better Web Designer, in 4-D!

On Becoming a Better Web Designer, Part Third

On Becoming a Better Web Designer, Part Deux

On Becoming a Better Web Designer [First Part]