Comments (/* */)

/* Single-line comment. */

/*
  Multi-line comment.
  Everything between /* and */ is a comment.
*/

.selector {
  color: red; /* Inline comment — can be placed after a property. */
}

CSS does not have a single-line // comment. The following is invalid according to the CSS specification.

// This is NOT a CSS comment (it is a Sass // comment, which is a different thing)

Some browsers happen to ignore //, but relying on behavior outside the spec is not recommended. If single-line comments are needed in a toolchain that uses Sass or PostCSS, use the features those tools provide so that the compiled CSS does not contain them.

Comments cannot be nested

CSS comments cannot be nested. Writing /* inside a comment does not start an inner comment. The first */ ends the comment.

/*
  Outer comment
  /* The inner /* is ignored */   ← The comment ends here
  This text is now outside the comment.
*/

When commenting out a large CSS block, any existing comments inside it will cause the outer comment to end at an unexpected location. Remove the inner comments before commenting out the block, or use Sass's // during development so they are stripped out at build time.

*/ cannot appear inside a comment

The comment terminator */ cannot be included in the comment body. The comment ends as soon as it appears.

Section dividers at the top of a file, and comments that explain intent.

style.css

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* The header is fixed to the top with position: sticky.
   z-index is set to 200 so it appears above .modal (z-index: 100). */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Card component */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  /* overflow: hidden prevents the inner image from overflowing the border-radius. */
  overflow: hidden;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* Corresponds to "text-primary" in the brand color guide. */
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Visually hidden class for screen readers.
   display: none hides content from screen readers as well,
   so this technique makes the element visually invisible
   while keeping it accessible to assistive technology. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Leaving comments that explain the reason for browser-compatibility workarounds.

compat.css

.flex-container {
  display: flex;
  gap: 16px;
  /* gap is not supported in Safari 14 and earlier.
     Older projects sometimes use margin as a fallback.
     The current target browsers support gap, so no margin fallback is needed. */
}

/* IE11 fallback: IE11 does not correctly handle calc() combined with
   CSS custom properties, so a fixed value is used as a fallback.
   This declaration can be removed once IE11 support is dropped. */
.item {
  width: 300px; /* fallback for IE11 */
  width: calc(var(--item-width, 300px));
}

CSS has only one comment syntax: /* */. The same notation is used for both single-line and multi-line comments. The // syntax is not a CSS comment — the fact that some browsers silently ignore it is behavior outside the spec. Sass and Less support single-line comments because they provide that as their own extension on top of CSS.

Comments cannot be nested, so commenting out a large block that contains existing comments will cause the outer comment to end at an unexpected location. In production, CSS is commonly minified to strip comments. The standard practice is to keep the annotated source files and exclude comments from the built output.

Using // as a comment in a CSS file

The // single-line comment is not part of the CSS specification. Some browsers may ignore it, but that is outside-spec behavior. A common mistake is writing Sass's SCSS syntax in a plain CSS file.

// This style is a temporary fix (invalid in CSS)
.title {
  color: blue;
}

Fixed:

/* This style is a temporary fix */
.title {
  color: blue;
}

Nesting comments causes the outer comment to end early

Comments cannot be nested. If the block you want to comment out contains an existing comment, the first */ will terminate the outer comment.

/*
.old-card {
  /* Old card style */   ← The comment ends here
  border: 2px solid red;
}
*/

Remove the inner comment before commenting out the block.