CSS Maintenance Tip: Use a Color Glossary

I haven’t done this in a while, but I’ve found it useful to include a color glossary at the top of CSS files. Think of it as a key for hex colors. Not only does this makes it easier to quickly find the color you’re looking for, but it inevitably helps out the poor soul that has to update your code in the future.

/*
  Yellow Highlight - #ffc
  Bold Blue - #1678b7
  Light Blue Background - #e5f6ff
  Bold Green - #393
  Light Green Background - #e3ffdc
  Bold Orange  - #f60
*/

You can make this as simple or as complex as you want. You may want to group different sets of colors based on how you use them. For instance, background colors, heading colors, tab colors, etc. You might even want to add a more detailed explanation that references a style guide or provides a brief explanation of how and when to use that color.

It’s important to remember that the more detailed information you add, the more likely you are to have update it later. I’ve found that a simple list of colors, like I used in the example is enough to get the job done 80% of the time.