Comments in CSS

You've learned the structure of a CSS ruleset. Now, let's talk about the essential tool for any good developer: comments.

Comments are lines of text that the browser completely ignores. They serve a crucial purpose: to make your code understandable to yourself (when you return to it months later) and to other developers.

The CSS Comment Syntax

Unlike HTML (which uses <!-- ... -->) or JavaScript (which uses // or /**/), CSS only uses one syntax for commenting.

Single Syntax: Slash-Asterisk (/* ... */)

The syntax for comments in CSS starts with a forward slash followed by an asterisk (/*) and ends with an asterisk followed by a forward slash (*/).

Single Line Comment

/* This is a simple comment that explains the rule below. */
body {
  font-family: 'Helvetica Neue', sans-serif;
}

Multi-Line Comment

/*
  =====================================
  This is a large, multi-line comment.
  We use this for section headers 
  or complex explanations.
  =====================================
*/
.main-layout {
  display: flex;
}

The Key Rule

Regardless of whether your comment spans one line or ten, you must use the /* and */ delimiters. You cannot use the double-slash (//) syntax in standard CSS.

Why Comments are Crucial

Good comments are a sign of professional, maintainable code. They help in two primary ways: Documentation and Debugging.

1. Code Documentation

Use comments to explain the why behind your code, not just the what.

Example of Good Commenting	Purpose
/* FIX: Added !important here to override third-party library 'reset.css' */	Explains why you used an unconventional/dangerous feature.
/* --- 2.0 Typography Styles --- */	Provides a clear structure and navigation guide for your large stylesheet.
/* Targets the first button in the navigation bar only */	Clarifies the intent of a complex or specific selector.

2. Debugging and Temporarily Disabling Code

Comments are a perfect tool for quickly testing and fixing issues. If you suspect a specific block of CSS is causing a layout error, you can instantly disable it by surrounding it with comment tags, without deleting the code.

Before Commenting (Bug)

.sidebar {
  width: 250px;
  /* This line below is causing the layout to break! */
  float: left;
  background-color: lightgrey;
}

After Commenting (Testing)

.sidebar {
  width: 250px;
  /* float: left; <-- Disabled for testing */
  background-color: lightgrey;
}

Interactive Commenting Demo

Use the live editor to comment out the background-color and padding rules. See how the browser stops applying those styles instantly!