At work I have been trying to educate my co-workers about CSS and standards. One of the things I noticed recently is their lack of knowledge in CSS shorthand. So I’ve been busy putting together a style guide that will be followed with the attempt of keeping things consistent.

Shorthand saves time, space and bytes as well as being a good habit to get into.

I see a lot of code written like below:

#id {
margin-left:10px;
margin-right:10px;
margin-top:0px;
margin-bottom:10px;
}

With shorthand you can accomplish the same thing but with leaner code:

#id {
margin:0 10px 10px 10px;
}

The way I like to remember the order is by using the acronym “TROUBLE.” Which in CSS terms is Top, right, bottom, left. The same can be applied to padding.

Another shorthand I like to use is for fonts. Instead of writing it like this:

#id {
font-family:arial, verdana, sans-serif;
font-size:80%;
font-weight:bold;
line-height:1em;
}

It can be accomplished by writing this:

#id {
font:bold 80%/1em arial, verdana, sans-serif;
}

Keep in mind, that it must always be kept in this order—weight, size, line-height, family, otherwise it will not work.

For border properties, you can use the following:

#id {
border:1px solid black;
border-top:0;
border-right:0;
}

Finally, it’s not really shorthand but another acronym to keep the order of your links in check. LOVE/HATE represents a:link, a:visited, a:hover, a:active.

Just remember, Google is your friend when it comes to learning the in’s and out’s of CSS and pretty much anything else you can think of, so use it often. Have fun and good luck!

Comments are currently closed, but you can trackback from your own site.