Write Better CSS

When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:

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

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:

.header {
padding:5px 10px 5px 10px;
}

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:

.header {
padding:5px 10px;
}

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:

.header {
padding:5px 10px;
margin:5px 10px;
}

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:

.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}

However, with some nifty CSS it could look like this:

.header {
background: #fff url(images/image.jpg) repeat-x top;
}

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:

body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut:

body {
font: bold 0.8em/1.2em verdana, sans-serif;
}

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:

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

This can be shorted to the following:

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

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

Tags: css