Inspect Element

CSS Colour Quick Tip

18th June, 2009
Tom Kenny
the simple things

csscolour3

Using commenting in code is a good way to describe sections of code or giving a visual structure, helping anyone else who sees or has to edit the code. I find that a good way to use commenting is to include a list of all colours used in the CSS at the top of the CSS file. This, combined with a short description of what the colour is and where it is used on the site, is a good way of not only helping others edit a file but also helps yourself during the CSS development stages.

/* ------------------------------------------------------
Colours:
#555 - grey (used on text)
#33281E - very dark grey (used for block headers)
#A64A23 - brown
#9C9A69 - green (used exclusively on the Beneficiation page)
#ECE2DE - light grey (used for third level navigation)
------------------------------------------------------- */

It can be a frustrating experience to edit someone else’s code as everyone does things differently so something as simple as helpful comments will go a long way to reducing that frustrating down the road.

Discuss this on Google+