Latest Blog Posts at CodeProfessor.com

How to Comment CSS

CSS

Placing comments in a CSS file or code block can serve multiple purposes.

  • CSS comments can be used to explain the concepts of a block of CSS.
  • CSS comments can be essential during the development of a site to turn on/off specific elemental stylings.
  • CSS comments can control a temporary change into a site that may be reverted at a later date.
  • CSS comments can be crucial to organizing the logical structure of a CSS stylesheet.

For whatever the reason used to comment CSS, commenting CSS code is a simple way to not allow the commented code or text to execute when browsers load a stylesheet upon a visit to the site.

Different methods of commenting CSS

Both single and block comments in CSS b begin with a /* (forward slash + asterisk) and end with a */ (asterisk + forward slash). Several examples of commented CSS using both the single and block comments:

/* Single line comment */
.css-class {
  font-size: 2em;
  margin: 15px 4px;
  text-align:center;
}

/*
Sometimes you might want
to extend your comments
into more of a block.
*/

 

There are no restrictions as to the number of CSS comments that are allowed to be used within a CSS code block or file. Plus, there is no “standard” as to how much styling you can give to your CSS comments, as seen in the example below.

/*
*****
  * General Site Style
  *****
  * It might be helpful to create
  * some groups of instructions
  * that are styled that help organize
  * the CSS contained below
  *****
*/
body {
  font-weight:bold;
  padding:25px;
}

 

Many times in large web projects, the stylesheets can grow in size quickly and become a beast to manage and maintain. In these types of projects, it is not uncommon to find table-of-contents commented into the CSS that is meant to make it easier to find the necessary CSS rules in the future.

/*
* CSS Table-of-Contents
*****
* Section 1 - Style Reset
* Section 2 - Global Settings
* Section 3 - Fonts
* Section 4 - Colors
* Section 5 - Header
* Section 6 - Menus
* * * Section 6.1 - Header Menus
* * * Section 6.2 - Footer Menus
* Section 7 - Body
* * * Section 7.1 - Images
* Section 8 - Footer
*/
/*** Section 1 - Style Reset ***/
...
/*** Section 8 - Footer ***/

Where to Comment CSS

CSS comments can be used in any location where CSS is used for a website.

  • CSS comments can be used within Inline CSS
    Inline CSS is when styling is applied to a single element directly in the HTML tag.

    <div style="color:#33cc00;/* border:1px solid #000; */">
  <ul>
    <li>List item one</li>
    <li style="color:red;">List item two in color</li>
    </li>List item three</li>
  <ul>
</div>
  • CSS comments can be used within Internal CSS
    Internal CSS is a quick way to apply CSS rules directly to the HTML page that the internal CSS is added. The Internal CSS is added within the <header> section of the HTML site and wrapped with a <style>... Insert Inline CSS...</style> tag.

    <html>
 <head>
  <style>
    .class{color:#33cc00;}
    /* Added additional color */
   li.red {color:red;}
  </style>
 </head>
 <body></body>
</html>
  • Finally, CSS comments can be used within external stylesheets as was talked about above.

Do you have a specific way of styling your CSS? How well is your CSS commented? Could another developer come alongside and quickly understand the processes you are using to style your sites? Never be afraid to “over-comment” your CSS (and your code in general).