Don’t Use h1

Welcome to our CSS breakdown. In this article, we will be discussing the importance of writing comments in CSS, and how to do it effectively.

Code Snippet - Commenting in CSS

If you are accustomed to coding in CSS, a code snippet with comment would look something like this:

/* This is a single line comment in CSS */

/*
This is a multi-line comment
in CSS.
*/
body {  
   /* This is an inline comment */
   background-color: lightblue;
}

Code Explanation for Commenting in CSS

Comments in CSS allow you to insert notes into your source code. They’re useful for documenting your code in a descriptive way, which is extremely beneficial when you return to your code after a long period of time or when collaborating with other developers.

1. Single Line Comment:

   In CSS, single line comments are notated by the “/” and the ”/” symbols. You start a comment with /*, write your comment, and then close it with */. Anything between these symbols becomes a comment.

Example: /* This is a single line comment in CSS */

2. Multi-Line Comment:

   Multi-line comments work the same way, but extend over multiple lines. Starting with /* and ending with */, everything in between on all lines will be considered part of the comment.

Example: /* This is a multi-line comment in CSS. */

3. Inline Comment:

   An Inline comment is the type of comment that appears on the same line as a statement. You can use inline comments to clarify complicated lines of CSS.

Example: body { /* This is an inline comment */ background-color: lightblue; }

Notice in all the cases above, the commented text gets ignored by the browser and does not affect your CSS code.

There you have it! Remember, commenting isn’t just a way of explaining what your code does, it’s also a sign of professionalism. So comment your code, it can turn your good code into great code!