CSS Comments: Improving Code Readability

CSS comments are used to notate particular pieces, or snippets, of your code. They can also be used to block out specific pieces of code that you may not want to use in your application at the moment but may revisit later on. Comments do not affect the layout or output of the document, as long as they're used correctly.

In this tutorial, you'll learn how to comment in CSS, different ways of using comments for better code readability, and explain why they're important.

Why are CSS Comments Important?

Just like any other language, comments in CSS are important as they help categorize and explain the CSS rules you create. I like to think of them as the documentation of the code you're writing.

It may seem like a tedious task when you're going through writing out your code. After all, you know the rules for all of the selectors and classes you've defined, right? Right now, yes. Later on, when you come back to your code in a week, a month, a year, a decade... you're probably not going to remember what you created or why.

Another scenario is if you're working in a team environment. Other developers working on the same project with the same assets will not know why you created the rules you did and could a lot of confusion, or even misuse, of the CSS rules defined.

In a nutshell, to make everyone's life easier, use comments. It's the easiest and quickest communication tool you have for your team and yourself.

How to Create CSS Comments

Comments in CSS are simple. You have your comment opener /* and closer */. You can create both single line or multi-line comments using the same syntax.

Here is an example of a single line comment:

/* This is a single line comment */
... CSS rules here ...

And here is an example of a multi-line comment:

/*
This is a multi-line comment.
Here, you can add as many lines as you would like.
Try to keep it as detailed yet brief as possible.
*/
... CSS rules here ...

Another multi-line example:

/* This is a comment.
This is the second line of the comment. */
... CSS rules here ...

Conclusion

And that's how to comment in CSS! The explanation of CSS comments and why they're important is much more detailed than how to implement them. I just wanted to explain their use and importance in as much detail as possible to make your life, and your team members' lives, much easier.