Comments in CSS: Syntax, Shortcuts and Examples
Contents
A comment in CSS starts with /* and ends with */. Everything between them is ignored by the browser, whether it’s one line or fifty. CSS has no single-line // comment like JavaScript: /* */ is the only comment syntax.
Single-line comment
Put the comment on its own line above the code it explains, or after a declaration on the same line.
/* Primary button */
.button {
background: #2563eb;
padding: 12px 20px; /* matches the input height */
}Multi-line comment
The same syntax works across several lines. Use it for longer notes, like why a workaround exists.
/*
Safari needs the -webkit- prefix for backdrop-filter.
Remove it once support is no longer needed.
*/
.glass {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}Comment out CSS code
Wrap a declaration or a whole rule in /* */ to switch it off without deleting it. This is the quickest way to test what a line of CSS actually does.
.card {
padding: 24px;
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
}
/*
.card:hover {
transform: translateY(-2px);
}
*/Keyboard shortcut
In VS Code, Sublime Text, WebStorm and most other editors, select the lines and press Ctrl + / (Cmd + / on macOS). The editor wraps them in /* */, and pressing it again removes the comment. Browser DevTools work the same way: unticking a declaration in the Styles panel comments it out.
/* Select lines, press Ctrl + / (Cmd + / on Mac) */
/* .old-banner { display: none; } */Why // doesn’t work in CSS
// isn’t a comment in CSS. The browser treats it as invalid code and skips forward to the next ; or }, so it can silently swallow the line after it. That’s why a // “comment” sometimes seems to work and sometimes breaks a whole rule.
// can break the next rule
Here, the browser throws away everything up to the closing brace, so .title never gets its color.
// Title styles
.title {
color: #111827; /* ignored: the whole rule is dropped */
}
/* Title styles */
.title {
color: #111827; /* works */
}Comments can’t be nested
A comment ends at the first */, so a comment inside a comment closes the outer one early. Whatever comes after it is read as CSS again. If you need to comment out a block that already contains comments, remove the inner ones first or use your editor’s shortcut, which handles this for you.
Organize a stylesheet with comments
Section headers make long files easy to scan and search.
/* ==========================================================================
Layout
========================================================================== */
.container { max-width: 1200px; margin-inline: auto; }
/* ==========================================================================
Components
========================================================================== */
.button { /* ... */ }Comments in Sass, SCSS and Less
Preprocessors support both styles. // comments are removed when the file is compiled, so they never reach the browser. /* */ comments are kept in the compiled CSS unless you build in compressed mode. To keep a comment even in minified output, such as a license notice, start it with /*!.
SCSS comments
// Removed when compiled: notes for developers only
: #2563eb;
/* Kept in the compiled CSS (unless compressed) */
.button { background: ; }
/*! Kept even when minified, e.g. a license notice */FAQ
How do you write a single-line comment in CSS?
Use /* your comment */ on one line. CSS has no separate single-line syntax.
Do CSS comments slow down a website?
Barely. They add a few bytes, and minifiers like Lightning CSS, cssnano and esbuild strip them out of production builds anyway.
Can users see my CSS comments?
Yes, if your CSS isn’t minified: anyone can open DevTools or view the stylesheet. Don’t put anything private in them.
Can I use comments inside a style attribute?
Yes. style="color: red; /* color: blue; */" works, though it’s rarely useful.
How do I comment in HTML?
HTML uses <!-- comment -->. Inside a <style> tag you’re writing CSS, so use /* */ there.
Related: CSS tips you won’t see in most tutorials, position absolute vs relative, and the CSS tutorial for beginners.
