Using Shorthand CSS in Your Cutups

[Tami]

Using Shorthand CSS in Your Cutups

By Dustin Brewer

Using shorthand CSS can save some 1’s and 0’s in your stylesheets which add up if you have a busy web site. Just think, all those extra lines of codes taking up valuable bytes are adding up on that server. It may seem minimal at first but it does take up some space once you have enough sites on your server. Even if you don’t care that much about bandwidth or server stress- you are wasting valuable keystrokes by typing extra attributes and properties in your CSS.
Shorthand CSS is a productivity tool

It is a good habit to be in if you are using shorthand CSS, you can save a lot of time by combining attributes like font, border and background. I know those are the three I spend the most amount of time with. Especially with the background property. When you are not using shorthand CSS you are having to type out background-image, background-color, background-repeat, background-position, and so much more. Shorthand CSS will clean up your markup tremendously.
Using shorthand CSS on the background property

This is how your normal background element looks when you aren’t using shorthand, you will see how much of a difference using shorthand CSS will make on your stylesheet complexity.

Code: Select all

.class {
background-color: #ffffff;
background-image: url(mycss.jpg);
background-position: center top;
background-repeat: no-repeat;
}

As you can see your CSS can get quite lengthy when you display every element out like this. Now lets take a look at this exact same CSS statement using the shorthand method.

Code: Select all

.class {background: #fff url(mycss.jpg) no-repeat center top;}

See how much of a difference it can make? It is easy to switch over to the shorthand CSS methods. Especially when you are using the background property, the reason for this is that it doesn’t require you to put the attributes in any order so you can mix and match without having to worry what place which CSS attribute goes.
Using shorthand CSS on the font property

When using the font property in shorthand things can get a little confusing so you want to be sure you pay close attention to this section. You must put all of your attributes in order if you want to use font in the shorthand CSS method. The reason for this is that various browsers assign different defaults to different elements and because of this you can easily specify something like the font size and color and accidentally erase the bold on a strong tag or something equally as traumatic. Maybe not traumatic, but it could turn out a bit frustrating. Like that time you broke your mouse, accidentally.

Here is an example of using the font property the lengthy way.

Code: Select all

.class {
font-variant: normal;
font-style: uppercase;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}

Now as you can see it can all get very lengthy to use the font element the regular way, it is safe to say however that most of the time you really aren’t going to be declaring all of these things on every element but it could easily come up. I know that I usually use line-height, font-family and font-size on pretty much everything so there are times when I actually don’t use shorthand for the font tag because of the confusion it can present in simple matters.

Here is an example using the font property the lengthy way, notice that the order in which it goes is font-style, font-variant, font-weight, font-size, line-height and then finally font-family.

Code: Select all

.class {normal uppercase bold 12px/1.2em Arial, Helvetica, sans-serif;}

I don’t generally use the font property in shorthand to be quite honest, but if you find yourself writing too much when it comes to fonts this information can come in handy. Especially knowing the order to list when using the font property in shorthand CSS.
Using padding and margin in shorthand CSS

These two are really simple for the most part, most of the time you are going to be declaring a mix between the all 4 or just top/bottom and left/right. It saves a ton of time to not type out padding-right, padding-left, padding-top, padding-bottom and so on. Same goes for using margin, it is an unnecessary bunch of stuff that will make your whole stylesheet look like garbage.

The most basic rule for using padding and margin is to know that it goes clockwise around your browser starting at the top. So, for example the following will illustrate the difference between longhand and using padding and margin for shorthand.

Code: Select all

.class {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}

Next I will display a couple of ways to do this exact same thing using shorthand CSS. The first example is the most applicable for this specific example.

Code: Select all

.class {padding: 20px 10px 5px 10px;}

Then you could also do the following and it would work just the same but would best be left for other instances or preference.

Code: Select all

.class {padding: 20px 10px 5px;}

You can easily group duplicate sizes in margin and padding. They both work identical except for their application. Just for clarification, padding is inside of the box and margin is outside of the box.
Using borders in shorthand CSS

The border for shorthand is a little different then the rest but can still be used much easier then the font property can. There are somethings that I wish the border property would do that it doesn’t but it is still efficient for what it is.
You can easily assign border for all sides or be more specific with border-top, border-left, border-right and border-bottom. It just depends on what you are doing for when you would use them.

This is an example of using the border property the long way, which takes quite a bit more work for less results.

Code: Select all

.class {
border-color: #000;
border-width: 1px;
border-style: solid;
}

The following example is simply using the border for all sides of your box, you must specific a pixel size, a border type and a border color for this to work properly. With the border in CSS shorthand you can use them in any order. So it is very easy to implement once you have built the habbit.

Code: Select all

.class {border: 1px solid #000;}

You can also only assign it to a specific side if you would like, as I had mentioned above.

Code: Select all

.class {border-bottom: 1px solid #000;}
Using list-style in CSS shorthand

This method of using shorthand CSS isn’t quite as popular as some of the others but I do tend to use it sparingly. I often forget it because it isn’t often that I want to use all of the properties available, but it can be handy.

Using the longer version of CSS for this style.

Code: Select all

ul li {
list-style: none;
list-style-position: inside;
list-style-image: url(myimage.jpg);
}

Now to simplify this CSS example, we would do the following.

Code: Select all

ul li {list-style: none inside url(myimage.jpg);}

Thats it for list-style, it is pretty basic and only comes in handy when you are doing navigation. I often forget about it but after writing all of this I’m sure I will remember to use it more often in my stylesheets.
The end to my guide to CSS shorthand for your stylesheets!

When I started writing this I think I forgot how much you can really use shorthand, I write my articles in OpenOffice before I publish them and it is currently telling me that I am on page 5, nearly at the end of it. Before anyone goes crazy about the fact that you can use outline in shorthand, I know you can and I didn’t include it because it isn’t really supported much and it has even less functional use in web design. If it has a renewal worth my time I may add it but you pretty much use it identically to the way you use the border for shorthand CSS.

I know I have missed a few CSS Monday’s but I’m sure that this one (even though it is late) is well worth the missed ones. This has a ton of information that I’m sure would be helpful to seasoned designers and beginners alike. So definitely take your time to [url=\"http://del.icio.us/post?url=http://dustinbrewer.com/index.php?a=78\"]delicious bookmark[/url] this page and subscribe to my [url=\"http://feeds.feedburner.com/dustinbrewer\"]RSS feed[/url] if you would like to continue reading more web design news articles like this one.

About The Author
Dustin Brewer is a web and graphic designer with a passionate interest in everything that is technology. He currently is the webmaster and editor for [url=\"http://techfilter.net/\"]tech filter[/url], a technology news web site, as well as a writer for Gadgetell-- a similar web site about technology news with a strong focus on new gadgets.

[url=\"http://www.designnewz.com/2007/11/19/using-shorthand-css-in-your-cutups/\"]source[/url]

[Jim]

CSS shorthand, as the author calls it, does save quite a bit of space in your stylesheets / websites, and if you need to conserve space it is a great idea. However, I find it to be more...messy and less organized?. By putting all of the elements on a single line, or taking out a few letters / numbers from the hex codes you might save a few bits, but it all ends up on a single line instead of nicely laid out.

IMO, this is easier to read

Code: Select all

.class {
font-variant: normal;
font-style: uppercase;
font-weight: bold;
font-size: 12px;
line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}

than this

Code: Select all

class {normal uppercase bold 12px/1.2em Arial, Helvetica, sans-serif;}

but again, if you need to save space, do the shorthand. it works, i used to use it quite a bit /good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />

[ner0]

I always use the long way too, mainly just because I'm set in my ways I guess..

though sometimes, with background especially, I'd prefer to use shorthand.