Comments in CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Example:

/*
  This is a 
  comment in CSS
*/
body {
  font-family: system-ui;
  font-size: 62.5%  /* 1em = 10px */
  line-height: 1.4;
}

The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.

Some CSS preprocessor syntax allow for JavaScript-style single-line comments, like this:

body {
  font-family: system-ui;
  // font-size: 62.5% 
  line-height: 1.4;
}

And actually, it’s a bit weird, but vanilla CSS also kind of supports that, it’s just a trick and you have to be careful.