A CSS comment is typically used to add additional notes to our code — which are not read by the browser.

We could also use comments to “comment out” a section of code, in order to prevent the browser from interpreting it.

Let’s take a look!

The syntax

We can add a comment like so:

/* This is a comment */

Comments can be used in a single line, or over multiple lines. Until you add the closing */ token, the all the lines between are commented.

For example:

/* A one-line comment */

/*
A 
multi-
line
comment
*/

/*
span {
  display: block;
  color: red;
}
*/

If you have experience with other languages such as JavaScript, you’ll be familiar with inline commenting using //. CSS doesn’t have inline commenting! So if you add // before a rule like so:

// Comment here
span {
  display: block;
  color: red;
}

CSS will detect a syntax error and ignore your rule! So be sure to avoid this by using the /* Comment */ syntax instead.

Using comments

How you choose to utilize comments is entirely up to you!

You could of course, use it to mark sections of code to be revised later, if for example you’ve implemented a hacky solution as a quick fix.

However, the best use for commenting is to illustrate the page structure in your stylesheets. With a proper structure, comments make it easy to navigate and locate the sections in your page.

For example:

/******************
 * UI Elements *
 ******************/

h1, h2, h3, p {
    ...
}

/******************
 * Header Section *
 ******************/

#site-header {
    ...
}

/******************
 * Footer Section *
 ******************/

#site-footer {
    ...
}

By breaking up your CSS into clear sections, its much easier to read. So when you need to come along and make a change at a later date — a clear structure makes for a much more pleasant process!

Related Posts:

• The Cascade, Inheritance & Specificity
• Basic Selectors