the TRBL with LoVe and HAte

January 14th, 2009

Back in my newbie days as a CSS jockey, back when I was still putting my styles in the document head (the web design equivalent of drinking out of a sippy cup), I would often write specs for margins or padding like this:

#someCrazyDiv {
padding-left: 16px;
padding-right: 19px;
padding-bottom: 10px;
padding-top: 10px;
}

Actually, it was usually a lot messier than that. The point is, I would write it in the longhand version. It didn’t seem like a big deal at the time, but now I know that all these extra bits add up to a rather bloated CSS document. The shorthand, byte-saving version of the same code is:

#someCrazyDiv {
padding: 10px 19px 10px 16px;
}

The proper order being: Top Right Bottom Left. I had a hell of a time remembering this until I realized it spelled TRBL, or trouble. Or Tribble, if you are of that inclination. Nerd.

Sidenote: I felt really cool having thought I invented this awesome new mnemonic device, until I googled it. Damn.

Along those same lines, pseudo-selectors attached to anchor tags must also be in the correct order. For example, if you wanted your links to be red, an the hover state of those links to be blue, you would lay it down like this:

a:link, a:visited {
color: red;
}

a:hover, a:active {
color: blue;
}

Hell, lets add some white in there, just to be super-patriotic:

a:link {
color: red;
}

a:visited {
color:#FFF;
}

a:hover, a:active {
color: blue;
}

God bless America.

Anyway, a handy way to remember the order is to look at the first letters of the pseudo-selectors, L, V, H, and A, and memorize them using this mnemonic device: LoVe and HAte. And if you have trouble remembering even that, you can always tattoo them onto your knuckles.

If you look closely at the code for a:visited, you’ll notice that the hex code for the color is only 3 characters long, which is yet another optimization method. More on that, and many more methods, in a future knowledge bomb.

leave a comment