CSS redundancy

— Topic: css

Q: How many web designers does it take to change a lightbulb?

A: As many as possible. One to actually do the work, and all the others to sit around and say: "I could've done that better!"

I have heard that joke in some form or another quite a few times, and I thought I would lead off with it in this article, to set the mood for a bit of CSS advice I'd like to give. I realize that everyone has their own style, and much has already been written on the subject of various coding idiocyncricies.

I just want to touch briefly on my thoughts about CSS shorthand. This won't be an in-depth guide, as one has already been written by Dustin Diaz. Rather, I will simply offer a few pointers that might help some of you make decisions about how to better use this method. Here are a few brief example cases.

Absolute Zero

When getting started with CSS, a common mistake I used to make was setting zero values with an incrimental measurement attached. In CSS, if a value is zero it really doesn't matter if this is set in pixels, ems, or any other measurement. Zero = 0 tons of feathers = 0 tons of stone. For instance…

padding: 10px 0px 0px;

/* should be written: */

padding: 10px 0 0;

Get Into Trouble

It's pretty common knowledge, but bears repeating, that margin, padding, etc. are set according to the TRBL, or trouble order. This means that the order goes: Top, Right, Bottom, Left. When defining them, bottom inherits from top, and left inherits from right. So, we can save a few keystrokes, and file-size…

padding: 5px 20px 10px 20px;

/* should be written: */

padding: 5px 20px 10px;

Border Order

Another mistake I used to make was that of defining border colors in the wrong order. We all know that the background color comes before the image, repeat and positioning, but this is not the case for borders. Oddly enough, placing it at the beginning still passes validation. Check out these examples…

border: #999 1px solid;

/* should be written: */

border: 1px solid #999;

Getting Specific

Another time-saver is leaving off words that don't need to be there, such as for setting background colors, as well as margins and padding. I rarely ever specify a background color in a longhand manner, unless I am specifically overriding only the color, usually on a hover state with a transparent image. Likewise, I only single out a particular side of something if I am overriding a single inherited value, allowing the others to remain unchanged, like this…

p {
	margin: 0 25px 10px;
}

p.info {
	margin-top: --10px;
}

/* Likewise, with backgrounds */

a {
	background: url(/img/link.gif) no-repeat right center;
}

a:hover {
	background-color: #ff0;
}

By using longhand methods sparingly, when I do come across an area in which I have been more specific, I know that it was for a good purpose, such as overriding some previously set style. It is for this reason that I will use shorthand even when only one value needs set: margin: 0 0 10px; or background: #fff; - This makes it easier to add values in later if need be.

Not only that, but by getting familiar with shorthand, it will be fresh in your mind. If you need to work on someone else's code later, you won't find yourself guessing what they meant, or wondering about the proper order. Hopefully, this article has proven informative, and will help you avoid some of the pitfalls of dealing with CSS. Feel free to leave coding tips of your own.

Me, elsewhere