Cascade FallsISSUE #9 of 33

comments · documenting styles

StylaVSThe Specificity Sphinx

Styla saysCSS comments /* like this */ document rules and disable code without deleting it.

Wrap notes in /* … */. Use them to label sections of a stylesheet, explain a non-obvious value, or temporarily switch off a rule while debugging. Unlike HTML, CSS has only this one comment syntax, and comments can't nest.

Power-ups you unlock

/* comment */ is the only CSS comment syntax
Label sections and explain magic numbers
Comment out rules to debug
Comments cannot nest

The Specificity Sphinx attacks — common mistakes

Leaving large blocks of dead commented CSS in production
Trying // line comments (not valid CSS)
Nesting /* */ comments

Boss battleAdd a section comment, then comment out one rule and watch its effect disappear.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>/* layout */ body{background:#06040d;color:#e6e0ff;padding:20px} /* h1{color:#b388ff} */</style></head><body><h1>comment toggles me</h1></body></html>

▶ Open the interactive comic issue

‹ Inheritance · What Flows Down Colors · Names · Hex · Rgb · Rgba ›