CSS TutorialsCss What is
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:
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:
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.