CSS Comments - Schools of Web

When you’ve completed coding an HTML web site, you’ll find the style sheet(s) has hundreds of lines, even not thousands. At that moment, you know which style rule does what; but, after few months you won’t remember. So, you need any kind of indications which will help you remind later about the functionalities of the style rules. Well, comments serve exactly that purpose and it works as a note for your codes. You can write comments inside your style sheet.

In this lesson we’ll learn how to write comments in CSS and their best practices.

Why should you use comments

Comments remind you purpose of your codes later.
It helps other web developers to understand your codes easily and quickly.
You can comment a portion of your style rules to inactivate it and test its outcome. It’s a very handy way to test your design.

How to write single-line comments

To write a single-line comment, first mention /*, then write your comment and at last ends the comment with */. You’ll write comment inside style element which is placed inside the head element of an HTML document. See the following example-

<style>
/* This is a single line comment */
</style>

How to write multiple-line comments

You can use the same syntax that you used in single-line comment to write a multiple-line comment. Write as many line of comments as you need, just mention /* in the beginning and */ at the end. See the following example-

<style>
/* This is the first line of a multi-line comment.
This is second line of a multi-line comment.
*/
</style>

How to effectively write comments

You can divide a long CSS style sheet by sub sections and add one comment in the beginning of each section about what it does.
When you see a style rule and it is not obvious what it does, then add a comment for it.
Don’t comment for each and every style rule as CSS style properties are very intuitive to understand its functionality.
When you need to write a long notes for a style rule or a chunk of rules, use multiple-line comment. You can write multiple-line comments in the following situations-
- To provide background information about a style sheet like its creating date, author name, author URL, modifying date etc. See the following example-
```
/*
Style sheet name: base.css
Created on: 21th November, 2014
Author: Neil Fin
Author URL: http://author-url.com
*/
```
- To provide the table of contents for the current style sheet which will specify what are included in the style sheet. See in the following example-
```
/*
1. Reset
2. Header
3. Navigation
4. Main content
5. Forms
6. Search
7. Footer navigation
*/
```
  After this, when you start a section you can mention the section following any of the two ways below. (please mark that the second method uses all capital letters for each section name) –
  - /* ——————3. Navigation——————*/
  - /* 3. NAVIGATION———————————————————–*/
Whatever commenting format you follow, stick with it else you’ll be confused with your own comments later.
Write as less comments which is enough to understand your code, and write as much comments which will not increase your file size.

Don’ts of comments

Don’t nest one comment into another. See the following example-
```
<style>
/*
Style sheet name: base.css /* current file name. */
Created on: 21th November, 2014
Author: Neil Fin
Author URL: http://url.com
*/
</style>
```
After reaching the first closing */ at line 2 (at the end of the line), the browser considers it as the end of the comment. And, it expects texts after that */ (from line 3) as valid CSS rules, but, as you can see it is also part of the comment.

Things to know about comments

Comments are not read or interpreted by the browsers.