CSS Redundancy

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 {
  "social_links">
Dribbble
		
Flickr
		
Forrst
		
GitHub
		
Google+
		
LinkedIn
		
Pinboard
		
Rdio
		
Speaker Deck
		
Twitter
	
icons by Komodo Media