CSS - Comments

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 5–8 minutes

Comments document your CSS and help organize stylesheets. Use them to explain intent, not obvious code.

Learning Objectives

• Add meaningful comments to CSS using /* ... */ syntax.
• Follow best practices for documenting intent and organization.

Details & Examples

CSS uses /* ... */ for comments. They can appear almost anywhere a token is allowed.

/* Reset */
* { box-sizing: border-box; }

/* Buttons */
.btn { 
  padding: .5rem .75rem; 
  /* Matches design system spacing */
  border-radius: .375rem;
}

Common Pitfalls

• Redundant comments that repeat the code literally ("make text red").
• Leaving in temporary debug comments in production.

Checks for Understanding

1. What comment syntax does CSS use?
2. When should you add comments to CSS?

Exercises

1. Organize a small stylesheet with section comments (Reset, Components, Utilities).
2. Add a clarifying comment to explain a non-obvious CSS trick.