We’ve all been at a point where our stylesheets get way too big and disorganized, or maybe it’s just me that’s been there. In any case, we can always use a little optimization when we code. I’ll go over a few ways to reduce the number of lines of code for your CSS.

Margin:

You may have margins defined as the following:

margin-top:20px;
margin-right:10px;
margin-bottom:10px;
margin-left:30px;

All of this can be reduced to one line:

margin:20px 10px 10px 30px;

The first value is the top margin. The second value is the right. The third is the bottom. The fourth is the left. To help you remember this, think of it as a clock going clockwise starting from the top. It’s a lame way to remember it, but it helps me.

Padding:

The same thing can be applied to padding as well:

padding:20px 10px 10px 30px;

Font:

Defining the font can be a little more difficult to remember the order of properties. Instead of writing out:

font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size/line-height:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;

You can put all this into one line:

font:normal small-caps bold 12px Verdana, Arial, Helvetica, sans-serif;

All the values are respective to the previous property declarations.

Background:

The background might be written as:

background-color:#CCCCCC;
background-image:url(’background.jpg’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;

Once again, all this can be written as one line:

background: #CCCCCC url(’background.jpg’) no-repeat fixed top left;

While we’re at it, the color declaration of the background can be further simplified from #CCCCCC to just #CCC. I will use this simplification from now on in this post.

Border:

border is somewhat different from the previous properties. Not everything can be written on a single line.

If you want to set the border for all sides of an element do the following:

border:1px solid #000;

Basically, it sets all four borders to 1px wide with a solid style and a #000 color.

If you want to specify different borders, you’d have to individually specify them for each side that you want different from the previous declaration.

border-left:2px dotted #CCC;
border-right:3px dashed #333;

You can also specify the widths of the borders using the following:

border-width:1px 2px 3px 4px;

This follows the same pattern as the margin and padding.

You can also do the following to specify the top, bottom and sides.

border-width:1px 3px 2px;

This will set a 1px top border, 3px side borders (both left and right), and a 2px bottom border.

If you just want to specify the top and bottom, and left and right borders you can do:

border-width:1px 2px;

This will give you a 1px top and bottom border, and a 2px left and right border.

Similarly, this can be done to the border colors.

border-color: #ff0000 #00ff00 #0000ff #000;

This specifies the top, right, bottom, and left border colors respectively.

border-color: #ff0000 #00ff00 #0000ff;

This colors the top border #ff0000, the side borders as #00ff00, and the bottom border #0000ff;

border-color: #ff0000 #00ff00;

This colors the top and bottom #ff0000 and the sides as #00ff00;

Groupings

If you have more than one element with the same properties, you can save on more whitespace by grouping them together like so:

p.content, a.bolded {
font-weight:bold;
}

If you would like to make things easier for you, you could use the following site to do most of the work for you. Just keep in mind that it may break your CSS if you have any non-valid or hacked CSS.

I’ll continue to add on to this when I can think of more simplifications.