Don’t Write h1

In this article, we provide a simple guide on how to comment in CSS. Having a good understanding of how to comment can prove quite useful for future reference and code readability.

Code snippet for Commenting in CSS

When writing CSS, it’s crucial to comment on your code to improve usability and understandability. Here is a general look at how to comment in CSS.

/* This is a CSS comment */
body {
    color: black;
}

The above is a basic example of a CSS code with comments. In CSS, we use /* to start a comment and */ to end it.

Code Explanation for Commenting in CSS

Now let’s breakdown the CSS comment.

1. /* : This is the beginning of the comment. Everything after this will be interpreted by the browser as a comment until it reaches the end syntax.

2. This is a CSS comment : This is the actual comment. This could be anything that helps you or anyone reading your code understand what the CSS rules are doing or any other helpful information.

3. */ : This is the end of the comment. After this symbol, the browser will stop interpreting the text as a comment and go back to interpreting it as code.

Therefore, if we were to apply this information to our code snippet from earlier, /* This is a CSS comment */ is a comment in the CSS code. This comment does not affect the code in any way and is ignored by the browser when rendering the CSS.

Commenting your code is considered a best practice in all languages, including CSS. These comments can provide valuable context and explanations for complex areas of your code, improving overall readability. Not only are comments helpful for other developers reading your code, but they are also beneficial for you as the author to remember your thought process while writing the code. Make it a habit to write clean and well-commented CSS.