Single line comments

CSS uses the same "block comment" syntax as the C-like languages - you start a comment with  /*, and end it with */.

However, CSS is missing the "line comment" syntax that those languages have, where everything from // to the end of the line is commented out.

People have asked for this syntax to be added repeatedly, but unfortunately our hands our mostly tied - CSS minifiers don't know about line comments, so if we added it and the minifier removed all the linebreaks (as they tend to do), the line comment would accidentally comment out the entire rest of your stylesheet!

That said, CSS does actually already allow you to use //, after a fashion. It's not quite a line comment, but a next construct comment.

That is, whenever you use //, the next CSS construct - either declaration or block - will be "commented out". 

For example:

.foo {
  width: auto;
  // height: 500px;
  background: green;

}

Here, the // commented out the height declaration.


Similarly:

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }

}

Here, the // commented out the first @keyframes declaration.


Note, though, that if you try to use // just for writing comments into your stylesheet, you have to be careful - raw text isn't a CSS construct, so it'll look past that and comment out the next construct in your page:

// Do some stuff.
.foo { animation: bar 1s infinite; }

/* Whoops, the .foo block is commented out! */