How to improve CSS code

Often found in many CSS source codes is the following content:

.class {
  margin-top: 10px;
  margin-bottom: 7px;
  margin-right: 9px;
  margin-left: 5px;
  border-width: 4px;
  border-style: solid;
  border-color: #333333;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;
  font-weight: bold;
}

This is a more compact way to write the same thing:

.class {
  margin: 10px 9px 7px 5px;
  border: 4px solid #333333;
  font: bold 14px Verdana, Helvetica, Arial;
}

I think you've already guessed what the topic of this article is. We are going to talk about compactness (neatness) and correctness of CSS code. Without a doubt both variants are working ones, but it's more about the semantic correctness of the code. This is where I would like to stress on the main "errors" committed by many encoders.

Margins and paddings

Here is one way to write this code:

.class {
  margin-top: 7px;
  margin-right: 6px;
  margin-bottom: 9px;
  margin-left: 4px;
}

And this is a more "correct" way:

.class {
  margin: 7px 6px 9px 4px;
}

Here we can see that the compact form of entry is given in a defined sequence: first value - top margin, second - right, third - bottom and the fourth - left.

In case if left and right margins have the same values:

.class {
  margin-top: 0px;
  margin-right: 12px;
  margin-bottom: 8px;
  margin-left: 12px;
}

The short way to write it will look like this:

.class {
  margin: 0px 12px 8px;
}

If margins have the same values from all sides then they can be replaced by similar entry:

.class {
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  margin-left: 4px;
}

More simple:

.class {
  margin: 4px;
}

Border

Change this:

.class {
  border-width: 3px;
  border-style: solid;
  border-color: gray;
}

Into this:

.class {
  border: 3px solid gray;
}

If we style the right border, providing the following parameters:

.class {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: red;
}

Then it's better to replace the above entry with this:

.class {
  border-right: 1px solid red;
}

If you want to avoid assigning width for every border:

.class {
  border-top-width: 8px;
  border-right-width: 4px;
  border-bottom-width: 8px;
  border-left-width: 4px;
}

And now shorter way to write this entry:

.class {
  border-width: 8px 4px;
}

Background

Replace this:

.class {
  background-color: #FFFFFF;
  background-image: url(images/background-light.gif);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top left;
}

With this: 

.class {
  background: #FFF url(images/background-light.gif) no-repeat top left;
}

By the way, we are not giving short forms of writing scroll, it's unnecessarily, because this attribute is set by default, so there is no need to add extra lines.

Font

Replace this:

.class {
  font-family: Arial, Helvetica;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  font-variant: normal;
  line-height: 1.3;
}

With this:

.class {
  font: italic bold 12px/1.3 Arial, Helvetica;
}

And change this:

.class {
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
}

Into this:

.class {
  font: bold 12px Tahoma;
}

List-style

Replace this:

.class {
  list-style-image: url(images/nice-bullet.gif);
  list-style-position: inside;
  list-style-type: square;
}

With this:

.class {
  list-style: square inside url(images/nice-bullet.gif);
}

Color

If you have read the article HTML colors you probably are aware that the hexadecimal RGB-code is given in a defined sequence: the first two digits - red, the other two - green and the last two - blue. But if the digits of each color are identical to each other:

.class {
  color: #FFCC00;
}

Then this can be written in short form, using one digit of each color:

.class {
  color: #FC0;
}

Of course, if possible, replace the RGB-code with common name of a color.