CSS comments, written as /* comment text */, are ignored entirely by the browser and are used to document code or temporarily disable a block of styles.

Syntax

/* This is a CSS comment */

Deep Dive Course

Unlike some languages, CSS has only one comment syntax, /* ... */, which can span multiple lines but cannot be nested — a second /* inside an already-open comment has no special effect, and the comment simply ends at the very next */ encountered, whichever one comes first. There's no single-line // comment syntax in standard CSS, unlike JavaScript, so even a short, single-line comment still needs the full /* ... */ wrapping.

1Understanding CSS Comments

💡

CSS comments cannot be nested — commenting out a block of CSS that already contains its own comment inside it will end prematurely at that inner comment's closing */, leaving the rest of the intended comment as active, unintended CSS.

editor.html

/* Header styles */
.header {
  background: black; /* matches the logo's background */
  color: white;
}

localhost:3000

2Practical Example

Here is a real-world application of CSS Comments showing how it is used in production CSS code.

editor.html

/* Temporarily disabling this rule while debugging
.sidebar {
  display: none;
}
*/

localhost:3000

3Best Practices

Follow these guidelines when working with CSS Comments:

1. Use /* ... */ to document non-obvious CSS decisions, like why a specific magic number or an unusual override is needed

2. Comment out a block of CSS temporarily during debugging to test how the page behaves without it, rather than deleting and later having to rewrite it

3. Watch out for nested comments when commenting out a larger block that already contains its own comments, since the outer comment ends at the first inner */ it finds, not the last one

⚠️

Tip: CSS comments cannot be nested — commenting out a block of CSS that already contains its own comment inside it will end prematurely at that inner comment's closing */, leaving the rest of the intended comment as active, unintended CSS.

editor.html

/* Header styles */
.header {
  background: black; /* matches the logo's background */
  color: white;
}

localhost:3000

Examples

Example 01Basic Usage

/* Header styles */
.header {
  background: black; /* matches the logo's background */
  color: white;
}

Example 02Advanced Example

/* Temporarily disabling this rule while debugging
.sidebar {
  display: none;
}
*/

Best Practices

Use /* ... */ to document non-obvious CSS decisions, like why a specific magic number or an unusual override is needed
Comment out a block of CSS temporarily during debugging to test how the page behaves without it, rather than deleting and later having to rewrite it
Watch out for nested comments when commenting out a larger block that already contains its own comments, since the outer comment ends at the first inner */ it finds, not the last one

Interview Question

Why does attempting to comment out a CSS block that already contains its own inner comment sometimes leave part of that block unintentionally active?▼

Hint: Think about how a CSS parser decides exactly where a comment ends, especially when there's more than one */ sequence within the intended comment.

A CSS parser doesn't track any concept of nested comment depth, it simply looks for the very first */ sequence after an opening /* to determine where that comment ends, with no special handling for another /* encountered along the way. If a developer wraps a larger block of CSS in /* ... */ to comment it all out, but that larger block already contains its own inner /* ... */ comment somewhere inside it, the outer comment actually ends at the inner comment's closing */, not at the outer comment's own intended closing */ written later in the file. This means everything after that inner closing */ up until the outer comment's intended, but now unreached, closing */ is parsed as regular, active CSS rather than as part of the comment, which can silently reintroduce styles the developer specifically intended to disable, a subtle bug that's easy to miss since the code still visually looks like it's all commented out.

Exercises

MediumPractice using CSS Comments in a real scenario.

View Solution

/* Header styles */
.header {
  background: black; /* matches the logo's background */
  color: white;
}

Frequently Asked Questions

Why does attempting to comment out a CSS block that already contains its own inner comment sometimes leave part of that block unintentionally active?▼

Related Functions

CSS-SyntaxCSS-RulesIncluding-Css-in-Html