CSS Comments
CSS comments document why a rule exists. They are ignored by the browser and stripped by build tools.
Syntax
// is JavaScript, not CSS.What comments are good for
- Naming logical sections of a stylesheet ("Header", "Buttons", "Print styles").
- Recording the reason behind an unusual value or workaround.
- Temporarily disabling a block of rules while debugging.
- Marking TODOs that a search will find later.
Note: You can't nest
/* … */ inside another /* … */ — the first */ closes the outer comment. Use a build step (or SCSS) if you need real nesting.Tip: Production builds typically strip comments. Write them generously in source — your future self will read them.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Comments</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Wrap this label as a CSS comment so the browser ignores it.
Section: buttons
Block comments start with /* and end with */.
Discussion
Loading…