This article discusses methods of best practice that are designed to reduce the amount of CSS, optimise markup and create more easily managed websites.

CSS was designed for many things – to separate content from design, to promote semantic markup and to reduce document size – but as CSS has developed over the years, so has the way in which we use it. So much so, in fact, that passing a stylesheet between two or more developers can result in some discussion...

1. Start every project with a reset document

A CSS reset document essentially sets every element to zero, disposing of their default margins, or padding, and creating a clean slate on which to build your site.

This is particularly useful if you want to take true control over your layout at the first instance. You can find a good reset stylesheet here. Simply include that in your pages and then create another called "generic.css" which overrides the reset.

2. Use CSS "shorthand"

CSS shorthand is a means of declaring all the values of one element in one go. For example, instead of using: 

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

You would use shorthand like so: 

#header {
margin: 10px 5px 10px 5px;
}

Can't remember which side is which? Easy – just read it left to right in a clockwise fashion (10px being the midday, 5px being 3pm, and so on).

This method cuts down on the amount of CSS needed, it’s quicker to type and easier to change in the future.

3. Use a clearing div

This is something of some discussion between developers, but after extensive trial and error I have concluded that using a div to clear either a left or right floated element is the most efficient cross-browser method.

Create this class:

.clear {
clear: both;
}

Then insert this beneath floated elements like so:

<div class="clear"></div>

This will effectively end the floated space above it.

Most basic layouts can be built without using extra clearing divs but a large scale project with many developers working on it can suffer and sometimes it’s much easier to have a universal element that can be used where appropriate.

4. How to central align the page using CSS

I have been asked this question time and time again – just how do you centralise a fixed width container?

To a CSS newbie this is a difficult task, but when you dig a little deeper you realise the solution is purely logical.

Take a fixed width container, centrally aligned to the body, and you have CSS that looks something like this:

body {
text-align: center;
}

#container {
width: 970px;
margin: auto;
text-align: left;
}

All we are doing here is setting the container margin to be calculated by the body, which is set to align things vertically. We then just need to set the text alignment to left, else the cascade will continue and everything inside the container will be centrally aligned also.

5. User conditional stylesheets where appropriate

For large projects that need to work across every mainstream browser, just the one stylesheet probably won’t be enough; you’re going to have to write styles for certain browsers in particular (*cough cough* IE6). Sure, you could write CSS hacks but these won’t validate, and validation is important. Instead you would conditionally include stylesheets based on browser with:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

Again, this would only be required for projects of some scale, or particularly tricky design.

The Ultimate Goal?

CSS is simple, but very powerful. Always remember that the point of CSS is to make things more manageable. There are lots of other tips I could write here – such as always remembering to comment CSS code – but if you understand the true concept of CSS you will already be taking full advantage of it.

Unfortunately, many designers still use WYSIWYG editors that create bloated, inefficient CSS. Taking time to craft well thought out stlysheets will help you as a developer, your websites scaleability and most importantly your end-users.

<link rel="stylesheet" type="text/css" href="css/ie6.css" />