ElanMan

Condense Your Code

If you’ve never looked into css shorthand before, now is the time to do so! Not only will it make your css easier to read and debug, it will result in smaller css files meaning faster page loading times for your sites’ visitors.

Let’s take a look at a fictional and particularly verbose yet perfectly valid style sheet that, with a little css shorthand applied, could become so much smaller and neater.

Longhand CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

div#intro {
    background-image: url(myimage.png);
    background-repeat:no-repeat;
    background-position:top center;
    background-color:#ffffff;
    border-width:2px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    border-color:#000000;
    padding-top:20px;
    padding-left:10px;
    padding-bottom:20px;
    padding-right:10px;
    margin-top:10px;
    margin-right:50px;
    margin-bottom:3px;
    margin-left:0px;
    font-family:Verdana,Arial,sans-serif;
    font-size:2em;
    font-weight:bold;
}

Ok, this is a fairly ‘over the top’ example but if your css is being produced by a WYSIWYG editor, it may well look like this.

To start our condensing of this css, we’ll get rid of all of that nasty top, left, right…. nonsense. Each property in css has a shorthand version. For example, padding…

This:

1
2
3
4

padding-top:20px;
padding-left:10px;
padding-bottom:20px;
padding-right:10px;

can become this:

1

padding:20px 10px 20px 10px;

The order in which these are written is clockwise starting from the top. However, because the top/bottom and right/left values are the same, this can be shortened further to this:

1

padding:20px 10px;

The same shorthand can be applied to our margins which now become this:

1

margin:10px 50px 3px 0;

Note that you don’t need to specify a measurement value such as px or em if the value is 0. Now we’ll have a look at the border property:

1

border:2px solid #000;

then the background property:

1

background:#fff url(myimage.png) top center no-repeat;

and finally the font property:

1

font:bold 2em Verdana,Arial,sans-serif;

This means that our original verbose version ends up neatly trimmed like this:

Shorthand CSS

1
2
3
4
5
6
7

#intro {
    background:#fff url(myimage.png) top center no-repeat;
    border:2px solid #000;
    padding:20px 10px;
    margin:10px 50px 3px 0;
    font:bold 2em Verdana,Arial,sans-serif;
}

Just 5 lines of css compared to the original 21. Why not take a look at your css and see where it could be trimmed?

Category: CSS // 1 CommentOpen my Lovebox