The Daily Bee

Shortening your CSS, part one

July 30th, 2008

By Rachael

If you make your own themes / layouts, you are probably already aware of CSS and how it works. You’ve probably experimented with the different properties you can use, and learnt some useful tricks.

If you’re anything like me, you might end up with a stylesheet that’s far longer than it needs to be. There are several ways you can “shorten” your stylesheet without any adverse effects on your layout. This both has the benefit of reducing the size of your stylesheet (thus reducing loading times), but it can also make your stylesheet easier to read.

Let’s start with some basic examples.

div {
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
}

Because all four sides of padding are the same, this can easily be shortened to

div {
padding:10px;
}

Now, if you had a different amount of padding on each side of your div element, such as:

div {
padding-right:10px;
padding-left:20px;
padding-top:30px;
padding-bottom:40px;
}

You could still shorten that.

div {
padding:30px 10px 40px 20px;
}

You might be wondering how your browser knows which padding matches up with which side. Well, think of it like a clock. Top – right – bottom – left. That’s how your browser should interpret the above syntax.

The same goes not just for padding, but for margin too.

div {
margin-right:10px;
margin-left:10px;
margin-top:20px;
margin-bottom:20px;
}

We can shorten that to:

div {
margin:20px 10px 20px 10px;
}

However, because the margin-right is the same as the margin-left, and the margin-top is the same as the margin-bottom, we can shorten it even more!

div {
margin:20px 10px;
}

When there are two values assigned like this, the first one affects the “top” and “bottom”, and the second one affects the “left” and the “right.” A more familiar example might be:

div {
margin:0 auto;
}

Remember this centering cheat? It follows the same theory. You could write:

div {
margin-right:auto;
margin-left:auto;
margin-top:0;
margin-bottom:0;
}

and it would have exactly the same effect. Nifty, eh?

And if your element has both padding and margins, just look at the saving you can make!

div {
margin-right:auto;
margin-left:auto;
margin-top:0;
margin-bottom:0;
padding-left:10px;
padding-right:20px;
padding-top:30px;
padding-bottom:40px;
}

Using the techniques we used above (condensing 4 separate properties to one property with 4 values, and condensing 4 properties (with 2 matching values) to one property with 2 values), we can shrink the above chunk of syntax to:

div {
margin:0 auto;
padding:30px 20px 40px 10px;
}

Tell me that doesn’t save space and make your stylesheet easier to read. You just need to remember… top – right – bottom – left. Like TRouBLE. Or like a clock.

Margin and padding are only two of a fairly large number of CSS properties that can be condensed. We’ll cover some more at a later date, such as background, font, and border.

I’ve tried to be as clear as possible in this how-to guide, but let me know if you’re still confused and I’ll do what I can to help.

Posted in How to...