How to Add and Use CSS Comments

Each website consists of elements that are structural, functional and stylistic. Cascading Style Sheets (CSS) are used to define a website's appearance ("look and feel"). Such styles are treated separately from the HTML structure so that web standards can be easily updated and applied to.

The problem with stylesheets is that stylesheets can become quite long and complicated with the size and the complexity of several web pages nowadays. It's particularly true now that media queries are an important part of the design for responsive website styles, helping to ensure that a website looks as it could be regardless of device.

These media queries alone can offer a significant amount of new styles to a CSS document, making working with it even more difficult. It's where CSS comments can be website designers and developers an essential help.

To give explanatory information to the code or to prevent the browser from trying to interpret particular parts of the style sheet, a CSS comment is used. Comments by design had no impact on a document's layout. The comments can't be displayed, because they are ignored by browsers.

The usage of comments at the same time as writing CSS code is useful for the coder and everybody else that may work on or research from the code. Comments are used to explain potentially confusing functions, easily prevent blocks of code from being run, and create documentation for the code's capabilities and meaning. There is no need to comment for every piece of code which you write. However accurate commenting can help all.

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

Begin your comment by adding a /* and close your comment by adding a */.

The syntax is like this:

/* comment */

This syntax is used for both single and multiline comments. Now let’s see an example where comments are used.

Example of adding a CSS comment:

<!DOCTYPE html>
    <title>Title of the document</title>
      p {
      line-height: 2em; /*1em = 16px */
    <p>Some paragraph.</p>
    <p>This paragraph is written with 2em line-height.</p>

Properly-formatted comments can describe important aspects of the stylesheet to participants of a company who might not be familiar with the code previously. These comments are also very useful for people who've worked on the website earlier, however, haven't worked lately; web designers usually work on various websites, and remembering design techniques from one to the following is hard.

Many designers are breaking out sections and coordinate stylesheets in small, easily understandable pieces that can be quickly investigated when reading. You will typically see comments preceded and followed by a series of punctuation marks creating massive, clear breaks on the page to make them easy to see. Here is an example of this:

Example of adding a CSS comment with clear breaks:

This is a style for the background.

Or it can be like this:

Example of adding a CSS comment preceded and followed by punctuation marks:

/*---------------------- Background Styles ------------------------*/

While adding too many comments may affect the download speed and actual performance of a website, you must not hesitate to apply them. A massive reduced impact would take many lines of comments. It all comes down to balance, like so many parts of web structure.

Do you find this helpful?

Related articles