Date: 27 Oct 2009 Comments: 0

1. Repetition of same code

border-top:1px solid #f00;
border-right:1px solid #f00;
border-bottom:1px solid #f00;
border-left:1px solid #f00;

Each border is the same! So, it can be replace with:

border:1px solid #f00;

2. Duplicate Color Codes

color:#aabbcc;

Write the code like this instead:

color:#abc;

3. Not applying more than 1 class at a time

.classA {background-color:#f00; }

.classB {color:#000;}

.classAandB {background-color:#f00; color:#000;}

<div class=”classAandB”>…</div>

We don’t need .classAandB, we can write:

<div class=”classA classB”>…</div>

4. Ignoring of selectors

.footerlink {…}

write the code like this instead:

#footer a {}

5. Not cascading the styles

body {color:”#ff0;}

h2 {color:#ff0;  font-weight:bold;}

This would be better:

body {color:#ff0;}

h2 {text-decoration:underline;}

6. Adding ‘px’ for zero values

padding:0px 5px 0px 0px;

It can be written instead like this:

padding:0 5px 0 0;

7. Not Grouping Identical Styles

h1 {font-family:Arial,Helvetica,sans-serif;}

h1 {font-family:Arial,Helvetica,sans-serif;}

h3 {font-family:Arial,Helvetica,sans-serif;}

p {font-family:Arial,Helvetica,sans-serif;}
It can be written instead like this:

h1, h2, h3, p {font-family:Arial,Helvetica,sans-serif;}

8. Not using Firebug

Firebug allows you to inspect the CSS element and make your changes;  Firebug will automatically reflect your changes in real time, helping you to judge immediately if the changes you made to the code are correct.

If they are correct, you can then save the correct CSS entry to the original file. This makes the editing process fast and easy.