CSS Comments
How to work with comments in CSS
CSS gives you the ability to write comments in a CSS file, or in the style
tag in the page header
The format is the /* this is a comment */
C-style (or JavaScript-style, if you prefer) comments.
This is a multiline comment. Until you add the closing */
token, the all the lines found after the opening one are commented.
Example:
#name { display: block; } /* Nice rule! */
/* #name { display: block; } */
#name {
display: block; /*
color: red;
*/
}
CSS does not have inline comments, like //
in C or JavaScript.
Pay attention though - if you add //
before a rule, the rule will not be applied, looking like the comment worked. In reality, CSS detected a syntax error and due to how it works it ignored the line with the error, and went straight to the next line.
Knowing this approach lets you purposefully write inline comments, although you have to be careful because you can’t add random text like you can in a block comment.
For example:
// Nice rule!
#name { display: block; }
In this case, due to how CSS works, the #name
rule is actually commented out. You can find more details here if you find this interesting. To avoid shooting yourself in the foot, just avoid using inline comments and rely on block comments.
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025