CSS Comments: Terms of Use

Using comments in code has always been considered good form among programmers. This facilitates the perception of the code, helps to divide it into logical blocks, and especially helps in working together on any project. In this article, we’ll look at how to use comments in CSS.

What are comments in the code and why are they needed?

There are generally accepted ways to make code more readable and easier to read - tabulation, using spaces and, of course, commenting on the code. Comments in CSS code are highlighted with special characters and are not executable tags, that is, the browser ignores them, they carry only an information load.

We’ll show you how to correctly comment on your code.

Comment Syntax

To ensure that the browser does not perceive information from the comment block, but only displays data, the following syntax is used:

.block { color: #000000; text-decoration: underline; /*   */ font-style: italic; } 

That is, the text is in the construction /*...*/. The browser will not accept CSS comments as elements that should be executed. They can be located anywhere in the document.

Very often, the CSS code during the work on the project becomes long, with a large number of various blocks - one, for example, describes the site header, the next - text input fields and so on. In order to accurately select each of these blocks, you can also use a comment. Many developers do this as follows.

 /* ------------------  ------------------*/ #left { background: red; width: 20%; height: 100%; } /* ------------------  ------------------*/ #right { background: green; width: 80%; height: 100%; } 

That is, the comment itself is highlighted with hyphens in order to visually highlight the part of the work that needs to be noted.

Rules for creating and using comments

Comment in CSS can be either multi-line or single-line, it is not regulated. The only important thing is what is indicated between the opening and closing tags.

Sometimes you need to disable some piece of code in order to check how formatting will be displayed in the browser without it. It’s rather inconvenient to copy it to a new document every time, there is a risk of losing it from the clipboard - in this case, it is easiest to wrap it in the comment syntax.

Comments in CSS can consist of any set of textual, numerical or symbolic notations; there is no difference in what language they are written.

Nested comments are not supported, it is forbidden to use one comment inside another.

Commenting is used in the following cases:

1. For the convenience of understanding the code by its author. When you need to make changes to the work, it is much easier to find the block when it is equipped with an explanatory signature.
2. In team work on a project, when you need to point out colleagues this or that information in the body of a document.
3. For the logical separation of the code into specific blocks, which also greatly simplifies the work.
4. You can add auxiliary code snippets to the comment that you want to stop displaying at some point.
5. As a rule, at the beginning of the C SS code, information about the developer and other information and technical data, such as the name of the project, the name of the author, the date of creation, and others, are indicated in the form of comments.

In conclusion, it is worth saying that comments are, of course, a wonderful and necessary tool for the developer, however, the more they are in the body of the document, the greater its weight, and this can negatively affect the site’s performance.