1. Keep it Simple

This may sound obvious but if you find yourself using complicated coding to achieve your design then you should think again about whether the feature you need is really necessary or if you're just thinking about your design and not your visitors. Too often designers get caught up in their own design and go to great lengths to produce a certain visual effect only to find later on that visitors find it either irritating or unusable.

Complex code is usually the result of muddled thinking. Plan your layout logically and work from the outside in and from the top down where possible. Look at what containers you will need and break jobs down into smaller parcels. I usually start with a page wrapper and then progress logically through the header, navigation, main content and footers etc trying to preserve the flow of the document as much as possible.

While good visual design is necessary to attract visitors you must still have good content and a usable and accessible site. If you find your html and css looks like spaghetti then have a re-think and see if you can simplify it. This will make it easier to maintain in the future and will often save code and bandwidth.

2. Don't use hacks unless its a known and documented bug

This is an important point as I too often see hacks employed to fix things that aren't really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with.

If you find its a known bug then 99% of the time there will be a known solution to this bug and you can safely use a hack if required knowing that you are fixing a bug and not just correcting bad coding.

I couldn't count the number of times I've seen layouts using hacks when all that was needed was to control the default margins on the page (see next tip).

3. Take care of margins and padding on all elements that you use

All browsers apply default padding and margins to most elements and the amount they apply varies quite substantially. Therefore you need to explicitly control the padding and margins on all the elements you use.

This is covered in depth in this article "No Margin For Error".

4. Avoid using too much absolute positioning

Most novices to CSS quickly latch on to absolute positioning because it is pretty straight-forward and does what it says on the box. However absolute layouts have a number of problems and the biggest problem of all is that absolute elements are removed from the flow.

This means that when you absolutely place an element then it has total disregard to whatever else is on your page. It will overlap whatever was in that position and will take no notice of other content at all. The result of too much absolute positioning is that you end up having to control everything with absolute positioning and makes for a very rigid and inflexible layout.

The most common problem encountered when using absolute positioning for two or three columns is "How to put a footer at the bottom of all three columns?" The answer is you can't, unless you resort to scripting or use a fixed height for all three columns.

Instead you should look into using mostly static positioning, margins and floats to maintain the flow of the layout. Static positioning is the default and basically means no positioning at all and the elements just take up space in the normal flow of the document. If elements flow normally then they have a logical construction and one element follows another without having to position it at all. You can use margins to nudge elements into position or use floats when you want elements aligned horizontally.

5. Avoid "divitus"

Although "divitus" isn't a real word it is now commonly used to refer to layouts that have too many divs and not enough semantic html. Semantic html means using the correct html element for the task in hand and not just using divs for everything. Divs are generic dividers of page content and nothing else. 99% of the time there will be an html tag perfect for the job in hand.

e.g. p,h1,h2,h3,h4,h5,h6,ul,ol,dl etc...

Use divs to divide the page into logical sections or when there is no better alternative. If your page is logically divided into sections that use id's to identify each section then this will allow you to target inner elements in that section without having to over-use classes on each element

e.g. #top-section h1 {color:red}(see next tip on "classitus").

A common misuse of divs can be found in the following example:
PLAIN TEXT
HTML:

1.
<div id="header">
2.
<div class="bold">Heading</div>
3.
</div>
4.
<div id="subheader">
5.
<div class="bold">Sub Heading</div>
6.
</div>
7.
<div>This is the content</div>

A lot of times the above code can simply be reduced to this:
PLAIN TEXT
HTML:

1.
<h1>Heading</h1>
2.
<h2>Sub Heading</h2>
3.
<p>This is the content</p>

As you can see, by using the correct html to describe the content you give your layout inherent structure and meaning without any extra effort.

6. Avoid "Classitus"

"Classitus" is another made up word similar to "divitus" (as explained above) and refers to the over-use of classes (or id's) when in fact none are necessary. If your page is logically divided then you can target many specific elements without the need for millions of classes.

A common example of misuse of classes is shown below:
PLAIN TEXT
CSS:

1.
a.link{color:red;text-decoration:none}

PLAIN TEXT
HTML:

1.
<ul>
2.
<li><a class="link" href="#">Link1</a></li>
3.
<li><a class="link" href="#">Link2</a></li>
4.
<li><a class="link" href="#">Link3</a></li>
5.
<li><a class="link" href="#">Link4</a></li>
6.
<li><a class="link" href="#">Link5</a></li>
7.
<li><a class="link" href="#">Link6</a></li>
8.
</ul>

All the links have been given a class of .link in order to style them and is completely unnecessary. If we apply an ID or class to the UL instead, we can target all the anchors within that ul without having to add any extra classes at all.
PLAIN TEXT
CSS: