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.
Commenting is key in any design firm especially when multiple developers work on the same project … — Genius24k
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.
Wheeeee!
******************
******************
******************/
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:
/*** TABLE OF CONTENTS 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 */
}
Slick!
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):
/*** COLOR PALETTE #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:
/*** COLOR PALETTE #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) ***/
