CSS Comments

CSS uses /* */ for comments — single-line or multi-line.

css Run in compiler
/* This is a comment */

/*
  Multi-line comment
  Useful for section headers
*/

h1 {
  color: orange;       /* main brand colour */
  font-size: 48px;     /* override Tailwind default */
}

css Run in compiler
/* ─── Reset ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Typography ─── */
body { font-family: 'Inter', sans-serif; line-height: 1.6; }
h1, h2, h3 { font-weight: 700; }

/* ─── Layout ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* ─── Buttons ─── */
.btn {
  /* TODO: extract to design tokens */
  background: orange;
  color: white;
  padding: 0.5rem 1rem;
}

• Section headers — group related rules.
• TODOs — reminders.
• Why, not what — /* fixes Safari flex bug */ beats /* set width */.
• Magic numbers — padding: 7.5px /* matches header height */.

• // single-line — NOT valid in CSS (works in SCSS).
• Nested /* */ — invalid; outer ends at first */.
• Comments left in production — strip in build (Webpack, Parcel).

1. Section your file — Add /* === Reset === */ headers. Hint: 3-5 sections.
2. TODO — Add /* TODO: extract colour to var */ to a hardcoded value. Hint: searchable.
3. Why comment — Replace /* set padding 7.5px */ with /* matches header line-height */. Hint: explanation.

💡 Think Like a Programmer: Comments aren't documentation — they're notes to future-you. Make them meaningful.