CSSnewbie

Use Comments to Organize Your CSS Design

Posted on February 12, 2008. By Rob Glazebrook.

It’s inevitable: the longer you work with CSS, the longer your CSS files will grow. And the longer your files get, the tougher it will be to find what you’re looking for when you go back to edit your website’s styles later on down the road. This is where CSS comments can really come in handy.

The syntax is amazingly simple: You start a CSS comment with /* and end them with */ – like so:

/* This is a CSS Comment. */
body {
	font-size: 80%;
}

A single CSS comment can also span multiple lines, like this:

/* This CSS was written by Rob.
   He thinks of it as his own child, so
   you'd be best off asking permission
   to use it. ;)
*/
body {
	font-size: 80%;
}

So what are CSS comments good for? Well, in addition to identifying the creator of a CSS file (as shown above), you can also use your comments to keep your CSS more organized. For example, I use comments to organize my CSS into sections, like this:

/* Top navigational elements. */
ul#topnav {
	property: value;
}

/* Main content area. */
#content {
	property: value;
}

This makes it much easier to come back though and add or remove values from a stylesheet later on.

I also use comments to identify any “hacking” I’ve been forced to do.

.column {
	height: 1%; /* Makes IE behave itself. */
}

That way, if the hack ever becomes unnecessary or causes a different problem down the line, it’s that much easier to find it.

What else do you use CSS comments for?