If you’re a web developer, you probably started using Cascading Stylesheets a long time ago. If you haven’t, go get yourself a copy of one of Eric Meyer’s books (1, 2, 3, 4) and learn about them. They will make your HTML cleaner, make your pages smaller (so they load faster), and make your sites easier to maintain and update.

OK, now I’ll step down off my soapbox and get back to my original message.

One of the features of CSS is that you can often condense multiple statements into a single statement via shortcuts. To control the margins of a block element on your page you could specify each edge, which is easy to follow and pretty clean, but it takes four lines of code just to control a few pixels of space:

#someblockelement {
margin-top: 5px;
margin-right: 2px;
margin-bottom: 5px;
margin-left: 2px;
}


If you set a lot of elements’ margins (or padding, or …) this could add up to several hundred kilobytes of data. Therefore, the creators of the CSS specification came up with a shortcut:

#someblockelement {
margin: 5px 2px 5px 2px;
}


This is much more compact, but what does it mean? If you have no CSS experience, that line is meaningless. Even though I should know that they are set in a clockwise order, I could never remember which number went with which edge until now. Today, while helping a colleague figure out some CSS code, I had to go to my favorite CSS reference site to figure this out. Reading the description on the site I said aloud “top, right, bottom, left—T, R, B, L—trouble!”

I’ll never forget the order of these sides in a CSS definition again, and now neither will you.