Plan ahead and keep organised

Declare your main structural elements nearer to the top of the document, and then the less important elements further down. Use a structure that works best for you, and save a template for future use.

1. Resets
2. Main Layout
3. Secondary Layout
4. Miscellaneous

Break your stylesheet into modules:

@import "/css/layout.css";
@import "/css/print.css";
@import "/css/typography.css";
@import "/css/forms.css";

Use Comments

Each CSS file should have a commented area at the beginning of the document, which includes the date it was written, updated date and the author. Use comments to clearly define each section of code.

Use Consistent and meaningful naming conventions

Try to use names that will remain relevant over time. The ability to redesign your entire website by just modifying the CSS will be much harder if you use limiting names. Use versatile naming and stay consistent – use hyphens instead of underscores (some older browsers don’t like underscores) but use it consistently, eg:

#Sub-Content { width:500px; background:#f2f2f2; }
#Advert-One { width:100px; background:#f2f2f2; padding:5px;}

Not this:

#SubContent { width:500px; background:#f2f2f2; }
#Advert-one { width:100px; background:#f2f2f2; padding:5px;}

If you capitalise the first letter of each word, and separate with a hyphen – do this for all elements.

Group elements and use shorthand

Use groups to re-use attributes instead of declaring the styles again. This technique allows you to create compact yet powerful CSS rules.

So this:

h3 {font-size: 12px; font-family: arial, helvetica, sans-serif;}
p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

h3, p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Use shorthand to create optimised CSS:

h3, p {font: 12px arial, helvetica, sans-serif;}

Validate

Every stylesheet should be fully validated using the free W3C CSS Validator, and if you’ve got issues with your CSS not doing what you want it to, this can be a big help in rectifying any errors in your code.