CSS Colour Quick Tip

by Tom Kenny (@tkenny)


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.

/* ------------------------------------------------------
#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.

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.