Talking to Yourself

cartoon word bubble

Looking for the lessons? Get started!

Description of the how's and the benefits of commenting your CSS.

The entire Web Design Principles section can be accessed through the menu below.

Principles Menu

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Contents of This Page

Commenting is key in any design firm especially when multiple developers work on the same project … — Genius24k

css icon

Commenting in your stylesheet follows a different format, but the same idea, as commenting in your HTML page. Here’s how you leave yourself a comment in your stylesheet:

/*here's my comment*/

The /* */ is the key to setting the comments apart and keeping the browser from trying, and failing, to interpret them as CSS elements.

Me, I like to set them off a bit more: /***  ***/. That’s okay, just be careful not to overdo it. You can do this if you really want:

Lots of blither about me!
My code is wonderful! Here's my contact info.
Here's information about my cats.
More pointless gibberish that slows loading time.

but why do you want to?

Just a reminder, make sure the /*  */ begin and end the comment.

More Uses for CSS Comments

A designer who goes by the handle “Brownspank” (ewwww) gives us a useful article that gives us some nifty uses for the CSS comment. I’ll summarize them here, but the article has more information.

Make a Table of Contents

We addressed this concept in somewhat different form in another page:

More about organizing your stylesheet.

You can organize things by including a “table of contents” in your stylesheet. Here’s an example of what such a table of contents might look like:


HEADING - Site name, logo, main menu
SIDEBAR - Submenu, searchbar, subsidiary navigation, utility links
MAINCONTENT - Articles, posts, comments, images
FOOTER - Copyright, text links

Makes it easy for searching your stylesheet as well.

Easy-Switch Comments

Here’s something I hadn’t thought of. Brownspank suggests that if you find yourself going back and forth on using a particular CSS rule (maybe you can’t make up your mind, maybe your client is indecisive), add a comment that makes it easy to “switch it on and off”. Like so:

This is “switched on”:

div#sidebar {
   width: 180px;
   color: #c00; /* SWITCH: paint sidebar red */

and this is “switched off”:

div#sidebar {
   width: 180px;
   /* color: #c00; SWITCH: paint sidebar red */


Label Your Hacks

I haven’t gone into hacks (usually for IE), but if you find yourself having to use them, you should consider commenting them for your own peace of mind (and everyone else’s who finds themselves working with your code):

div.example {
   height: 1%; /*** holly hack ***/

Build a Color Table

This is such a good idea, I’m going to do it for this site when I get an extra few moments.

Brownspank first suggests notating color choices to ease your confusion when you’re poring over your stylesheet, trying to remember what hex code stands for what color:

div.example {
   background-color: #f5f5dc; /* beige */
   border: 3px solid #556b2f; /* olive green */

but then he goes further and suggests creating an entire “color table” for your stylesheet, listing all the colors you use. Like so (I’ve just shamelessly cribbed his example):


#fff5ee - Seashell
#ff8c00 - Dark Orange
#8a360f - Burnt Sienna

#c6e2ff - Sky Blue
#1c86ee - Bright Blue
#0000cd - Royal Blue

If you’re anything like me, you can easily get entangled in colors. I can see this saving an inordinate amount of frustration. You might even go farther and label them as to what colors go in what elements:


#fff5ee - Seashell (background for main content)
#ff8c00 - Dark Orange (main link color)
#8a360f - Burnt Sienna (sidebar color)

#c6e2ff - Sky Blue (heading text color)
#1c86ee - Bright Blue (heading and footer background color)
#0000cd - Royal Blue (heading link color)