CSS Comments - Uses And Importance in Debugging Style Declarations

1. What are CSS Comments?

CSS comments allow the developers to add some mnemonics or reminders in between the CSS styles declaration. Therefore whenever the developer reviews the document, he will understand that declaration easily. Consider the basic syntax of CSS comments. Below are the examples of single line comment, multiline comment and documentation comment:

/*This is a comment. This is a single line comment.*/

/*
Another multi-line comment.
All the text between the star(*) and slash(/) will be commented out.
Browser will ignore the comments.
*/

/**
* This file contains all the functions of the website
* Functions related to home page
* Functions related to Page
* Some functions related to Posts
* Functions related to Website Custom Post Types
* And some other functions about website security
* Also this file has hooks related to theme files
*
*
* @package Tuts Insider.Com
* @sub-package Tuts Insider
* @since 1.0.0
* @url http://www.tutsinsider.com
*/

2. What is the Importance of CSS Comments?

Comments are important for developers as they help in many ways in large documents. Since we have seen the above instances of comments. We use a slash(/) and star(*) to start a comment. All the text after this star(*) will be considered as comment. Therefore after completing the comment, we must close the comment with slash and star but in reverse order.

2.1. Why to Use Comments in CSS Stylesheets?

While developing big projects, we put comments before certain sections of the style sheet declarations. Which will provide some information about the following declarations.

2.2. CSS Debugging By Using Comments

Likewise HTML comments, these comments also help a lot whenever some error occurs on the website. We can comment out different sections to see the results and trace out the problem.

2.3. Comments For Documentation Purposes

Moreover the comments also help the developers to explain each code block. He can explain the blocks by putting some information about declarations. Later he will take out the comments as documentation purposes. Also the comments will allow prompt understanding whenever a developer visits the code. Consider following examples:

/*CSS declarations for header area including site title and widgets.
*
*A review is required
*/
.header-wrapper{
	width: 100%;
	display: flex;
	positions: fixed;
	padding: 10px;
	background: #9198e0;
}
.header-title{
	flex: 30%;
	float: left;
	margin-top: 10px;
	font-size: 30px;
	display: block;
}
.header-widget{
	flex: 70%;
	float: right;
	display: block;
	text-align: right;
}
/*
.body-wrapper{
	width: 100%;
	padding: 30px;
	margin-top: 30px;
	border-top: 5px solid #000;
}
*/
.body-wrapper{
	width: 80%;
	padding: 20px;
	margin: 0 0 0 0;
	border: none;
}