Andrea's Blogger Templates

With large, complicated projects, it is often useful to annotate your CSS files with temporary comments to aid development. These could be reminders of things you need to do before launch or look-up tables for common values such as column widths.

If there are a lot of colors in your design, you will probably find yourself constantly flicking back and forth between your graphics application and text editor to check hex values. This can be a pain at times so several people have suggested the need for CSS variables. While this is an interesting idea it would take CSS one step closer to a proper programming language and potentially alienate non-programmers. As such, I tend to use a low-fi approach instead. All I do is add a little color look-up table at the top of my style sheet so I can constantly refer to it during development. Once I’m finished developing the page, I’ll usually strip this out.

To make your comments more meaningful, you can use keywords to distinguish important comments. I use  @todo as a reminder that something needs to be changed, fixed, or revisited later on, @bugfix to document a problem with the code or a particular browser, and @workaround to explain a nasty workaround:

In programming terms, these keywords are called gotchas and can prove very helpful in the later stages of development. In fact, all these terms form part of a project known as CSSDoc (http://cssdoc.net) that aims to develop a standardized  syntax for commenting your style sheets.