Commenting in Css

Defining rules is one thing, but consider how unmanageable a style sheet can become once
it holds 20 or 30 rules. This is where commenting becomes invaluable. The following example
includes simple comments that remind us what the rules are there for:

/* Default styling for paragraphs */
p {
color: #F00;
font-size: 12px;
}
/* Make all top-level headings gray and 16px high */
h1 {
color: #333;
font-size: 16px;
}
Introducing some plain English into the style sheet makes things much more friendly
immediately. All comments begin with a forward slash and asterisk (/*), and end with the
asterisk followed by the forward slash (*/). This is a very simple and easy to remember method
that you may prefer to use in more complicated or important styles, so you can work out what
does what when you return to your style sheets at a later date. Also bear in mind that adding
comments will increase file sizes, but this shouldn’t have a significant impact, especially as
browsers only have to the load the style sheet file once.
A method preferred by many designers further highlights the rule by adding a dashed line
with the comment—a great way of carving up the style sheet and making it more visually
manageable:
/* Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
Again this is very easy to add on the fly, and is arguably the best approach to commenting.
Without question, commenting makes troubleshooting and revisits to old designs much more
bearable, and is a huge timesaver.