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.

Design Inspiration from the World's Best Designers

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

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