Commenting

CSS comments

A CSS comment is typically used to add additional notes to our code. These comments aren’t read by the browser. We can also use comments to hide or “comment out” a section of code. This prevents the browser from running it as a part of the program.

The syntax

A comment looks like this:

/* This is a comment */

Comments can be used in a single line or over multiple lines. All lines occurring between the starting token (/*) and the ending token (*/) are commented.

For example:

/* A one-line comment */

/*
A 
multi-
line
comment
*/

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

Remember to close your comment. Otherwise, the rest of the code gets commented out.

Note: Unlike some other languages, CSS doesn’t have inline commenting. That means syntax used for commenting in other languages (such as // in JavaScript) won’t work in CSS.

Using comments

How you choose to utilize comments is entirely up to you. For example, comments can be used to mark sections of code to be revised later. However, one of the best uses for comments is to illustrate the web page’s structure in your style sheets. When properly structured, comments make it easy to navigate and locate the sections of your web page.

An example of properly structured comments is given below:

/******************
 * UI Elements *
 ******************/
h1, h2, h3, p {
    ...
}
/******************
 * Header Section *
 ******************/
#site-header {
    ...
}
/******************
 * Footer Section *
 ******************/
#site-footer {
    ...
}

Comments break CSS up into clear sections. So if you need to make a change later, a clear structure can make for a much more pleasant process!