When coding CSS there are many properties that you can optimise, doing this can also save time on defining attributes that can be optimised within on attribute in the first place, having this knowledge can help you with your CSS as well, saving space on your stylesheets and even in some cases speed up page loading times!

Why Optimise?

The word optimise generally means to improve or adapt something, and in CSS it's generally the improvement part that we're going to be looking at. I guess we could say that Optimising CSS is generally a tip that you can inherit. Don't get confused! Remember we're adapting CSS code to optimise to make it better, not change it's original content. Even now if your not currently optimising your CSS, your not doing anything wrong. In fact many tutorial sites you will see will not optimise there code (myself being one of the individuals that do this) generally it can be confusing showing someone who's generally new to the whole CSS scene, but on the other hand we're all different and some people will want the optimised part shown to them. Whatever floats or sinks your boat, you'll be shown the different versions anyway.

The objective of optimising CSS

This tutorial will be showing how optimising code can save you time and help improve your CSS altogether, the main objective of optimising is generally to show you the ways of saving time on writing out all those attributes, when some can be all included on one line, thus saving a load list of attributes on your CSS documents as well as improving webpage loading speeds.

You can obviously see I like to begin with a bit of theory, but now it's time to go into code mode!

Optimising the background-image attribute:

The background-image attribute in CSS is a must if you want a background image to be appearing somewhere on your webpage, a minimum of one line is needed to make a image appear but you will need at least two lines of code to be able to place a background properly.

The Scenario we have:

Imagine a website wants a background to appear on the right of the webpage, and have the image needing to be placed once (Meaning no repeat) so we have three attributes we need to define

Non Optimised Version:

background-image: url(images/example-background.png);
background-repeat:no-repeat;
background-position:right;

This code is correct, but because all of these attributes are using the background property we can define them in one line like so:

Optimised Code:

background: url(images/example-background.png) no-repeat right;

Notice how the attribute background-image has suddenly change to just background. This is essential information. In the optimised version you must change it to just background, if you don't optimise you can must remain intact.

Optimising the margin and padding attribute:

You will find you will use margins and paddings alot in CSS and optimising these bad boys could save you alot of time, as optimising these attributes will defiantly make you think.. "How did I life without this knowledge"

The Scenario we have:

A website developer wants to define all margins and paddings so this includes all four positions the way he could do it is....

Non Optimised Version:

margin-top:30px;
margin-right:15px;
margin-bottom:30px;
margin-left:15px;

padding-top:15px;
padding-right:10px;
padding:bottom:15px;
margin-left:10px;

A massive 8 lines of code to define something so small. Now check out the optimised version:

Optimised Version:

margin:30px 15px 30px 15px;
padding:15px 10px 15px 10px;

Suddenly we've brought it right down to just two lines. This optimising tip here is knowing that if you doing to define all four positions of margins on one line, CSS positioning of margins and paddings works like this:

1. Top
2. Right
3. Bottom
4. Left

So in this example, the second margin defined is the right margin (15px) and the third padding defined is the bottom. Remember this and you'll never have to add the position to the margin attribute ever again!

Optimising the font attribute

In CSS you will be defining fonts that suit your website, you may be defiing more than one for different parts. Optimising can come in handy here.

The Scenario we have:

Someone wants to have a light font, in the typeface of arial in a suitable size for a page title, here's one way someone could do it:

font-family:Arial, Helvetica, sans-serif;
font-size:36px;
font-weight:lighter;

Not exactly pretty to look at when you can do this:

font: lighter 36px/150% Arial, Helvetica, sans-serif;

It's another one line wonder after the optimising, but some important info for this optimisation. The optimised version must be placed this like to work. Doing it in a different order will not be valid, and depending on what browser you use may not display it even remotely correct. Like the background optimisation you will also need to simple use font as the attribute instead of font-family as the type of font family you are using is defined in the optimised version.

So there's 3 popular attributes that im sure many of you could optimise to save time! See if you can optimise more CSS attributes!