CSS Comments Tutorial

Adding comments to CSS code is very essential so that it can be easily understood after certain point of time. It also makes the life easy for others who try to read and modify the CSS according to their need.

Format of CSS Comment

CSS supports comments only in the following format:

Comment should have starting and ending declaration before and after the comment text. It can be a single line or span over multiple lines.

Example of a Single Line Comment

Single line comments are normally used to explain the change history or the original code as below:

#header h1 {
font-size: 44px;
float: left;
margin: 0;
}

#header h1 {
font-size: 28px; /* Original size: 44px; */
float: left;
margin: 5px; /* Original: 0; */
}

Here the changed style definitions are marked within comments. This is a good practice especially when you are playing with main CSS of your theme on a live site. If you make a mistake you always will have the original code to revert back.

Example of Multi Line Comments

This is the most common commenting style in CSS used to provide the explanation of the code or important usage information. Below is a practical example of multi line comments from the CSS file of a WordPress theme showing the theme details and the table of content of the CSS file.

/*
Theme Name: Twenty Fifteen
Description: Used to style the TinyMCE editor.
*/

/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Audio / Video
* 8.0 - RTL
*/

Using // for Single Line Comment in CSS

CSS does not support single line comment and the comment should have an opening and closing declaration. But some people still use // to mark the particular line invalid. For example, in the below code font-size will not be effective since // at the start make this declaration invalid.

.title {
//font-size: 28x;
margin: 5px;
}

But this is to make the line invalid which also can be done by adding any junk characters in front of the line. For example:

.title {
ZZZfont-size: 28x;
margin: 5px;
}

Though this will work for a single line it can’t be considered as a real single line comment. Moreover usage of // will have different effects depending on the place. For example in the below case // will comment out the entire block.

// This is invalid single line comment
.title {
font-size: 28x;
margin: 5px;
}
/* This will make the entire block declaration .title as invalid */

Points to Ponder