Recipe 1.9. Adding Comments Within CSS

Problem

You want to organize and keep track of the CSS with comments.

Solution

Add /* and */ anywhere in the styles to show the start and end of a comment.

/* This is a comment */ a {  text-decoration: none; } /* This is also a comment */ h1, h2 {  font-size: 100%;  color: #666666; }

Discussion

You may look at old code and not remember why you took certain steps with that code. Comments can explain and organize code to help with reviewing at a later time. Comments also help those who don't create the original code understand its purpose. Browsers ignore content that appears between the /* and */.

As you break up your code by section, comments come in handy in identifying each section such as header, footer, primary navigation, subnavigation, and so on. Comments provide a great way to test your web pages. If you're not sure about a style rule or how it affects the page, add a comment around the style to turn it off.

/*  a {  text-decoration: none; } */

The style rule for text-decoration won't take affect with the comments taking it out of circulation. Unless there are other styles for a, the underline appears under links until the comment is removed.

Problem

Solution

Discussion

See Also