71

I have recently started using // to "comment" out single lines of CSS code. I understand that I am not actually commenting out the line; I am just breaking it (I should use /* ... */), but it has the same effect. The line is then terminated by the ; and the following code works fine.

I could delete it, but often I prefer not to in case I want to put it back in later or see what I had been using if I come back to it.

Example:

li{
    float:left;
    //list-style-type:none;
    text-indent:0px;
}

Can I get away with this, or is it likely to cause me problems?

4
  • 4
    Related: stackoverflow.com/questions/11218808/…. Don't use // comments in CSS.
    – thirtydot
    Commented Sep 6, 2012 at 11:56
  • Yeah, very bad... although I still use it for instances of "I'll just comment this out for a minute and see what happens".
    – Nate C-K
    Commented Jan 16, 2014 at 15:32
  • Someone please tell the devs simplicity is better, it's ridiculous to have to move cursor and hit six keyboard strokes for a quick comment. * takes two.
    – gseattle
    Commented Mar 31, 2021 at 23:03
  • This question is opinion-based and should be closed. The asker already knows it isn't allowed and doesn't work, and is asking "if that's still OK". Whether it's OK to have broken code is a matter of opinion.
    – TylerH
    Commented Oct 5, 2022 at 13:55

11 Answers 11

91

I see that there were/are lots of people complaining about this and since this is an older question, there is probably a lot of people reading it wondering if it is still true, or if there is actually a standard in the first place. Allow me to clear the air. The following are the core reasons for the strict CSS comment policy:

#1 It is not standard

Standardized at least since CSS 2.1, comments are to ONLY be encased in /* and */. While some browsers tolerate //, they aren't supposed to, and are only one inch from someone saying "oh yeah that's non-standard" or "hey! That's non-standard, fix it!"; and then guess what, your CSS code, which WAS working, now doesn't for thousands of people (and may have already not been working for hundreds of others). I will add that <!-- and --> are allowed but only (and I mean ONLY) when they appear within an HTML document, not in a .css source file. If your browser is so old that it can't skip over <style> tags, it's probably time for a new browser 10 years ago. Even Lynx and other text browsers know not to read them, so commenting it out is only useful in very isolated situation where hardware and software are landlocked in their current working state.

#2 It is not (very) cross-platform friendly

The single line comment, which starts anywhere on a line with //, is terminated by 'newline' which is/are not a cross-platform standardized character(s). Worse, some might have one character for a newline, or 2... and when these platforms mix together, a newline could be lost, and there goes your terminator...and some or all of your code is now being commented out that was not supposed to be, you don't have to be a genius to know what the consequences of that might be, especially if you control features of your site solely through CSS which many do.

#3 The Standard IS Friendly and Uniform to All

The /* and */ delimiters are ALWAYS going to be the same characters on EVERY computer regardless of architecture, operating system, etc.

#4 Newlines are Whitespaces

The last reason (yes, there is one more), newline character(s) are considered (in CSS and many other languages) to be whitespace, and */ is not whitespace is it? And if you think about it at this point, it should be pretty clear you should NOT be using a whitespace to terminate a comment especially since whitespace is and can be stripped by many HTML/CSS parsers, or reformatted without you even knowing about it.

#5 CSS != C/C++

Now if you are about to fly out of your seat and yell at me about "Hey, but C++...", remember those compilers and IDEs have tons of newline checking and detection built into them so they can take it. Most compilers do not reformat your code unless asked, and many IDEs will usually ask you what kind of newlines your document is using if it can't guess on its own. If we did this with CSS pages for the end user every time one was loaded, imagine the nightmare it would be trying to get around. Furthermore, C/C++ code is not parsed at run-time and is compiled, so then much of the time, the user never gets the document in question in the first place. The source files are not being constantly viewed by the entire world on hundreds of platforms and many operating systems, and a million different browsers either. The comments are stripped out before they ever get to the end user. CSS source comes right to the user's browser and has to be very resilient not knowing what is on the other side, so the caveat is that it must be ready for anything the end user has or does, not anything the developer does or has!

#6 It's inconvenient

No, it is very annoying having to type that extra */, but the blame for this mainly goes to developers of CSS editing software who don't offer auto completion. If you use a specialized editor that can do that, preferably out of the box, then you'll find it is just as easy as using //. Get in the habit of typing /**/ and then backspace 2, it will help you to not forget and makes it a little easier. Better still, you can set up a hot key to just lay down those for you. Windows and Linux both have powerful tools to allow this (KDE is very good for that).


I hope this helps everyone understand the "why" behind the "how", and remember just because something works for you, doesn't mean it is the standard, and to sum up:

YES, IT IS BAD PRACTICE to use it, just say NO to the double slash!!! If you need a visual aid to remind you of this important fact, just burn this image into your mind (thanks to those of you who have nothing better to do but make pictures like this):

No double slash


PS: If you really want something to complain to the ones making/breaking CSS standards (W3C, elbow), someone starts a discussion about how unnecessarily long and wrong the "!important" keyword is! But that is not part of this question so I won't go into it.

References

  • W3C: CSS 2.1 working draft: comment characters.
  • W3C: CSS syntax module level 3: railroad diagrams of parser-to-character interpretations.
  • Stack Overflow: Various Stack Overflow articles with practically the same subject as this one.
  • w3schools: CSS 3 syntax standard (which in turn references W3C).
  • sitepoint: CSS syntax annotation on "not using double-slash".
  • mozilla|mdn: relaxed CSS 3 processing allows double slash in input files.
4
  • 10
    Why don't you have any links in your references?
    – BoltClock
    Commented Dec 23, 2013 at 6:42
  • 20
    It is absolutely criminal that you have not gotten more rep for posting that no-double-slash illustration.
    – Nate C-K
    Commented Jan 16, 2014 at 15:31
  • I didn't know any of that and couldn't stand the /**/ myself, so I appreciate the explanation of why. Now I'll stop inside-grumbling every time I have to hit 'end' and paste. Maybe there's an extension in VSCode for this. lol :)
    – Newbie
    Commented Apr 1 at 9:32
  • It looks to me like the part about newline and the fact that it's different character sequences on different platforms is irrelevant-- the // comment isn't going to end at a newline of any form, it's going to end at the first semicolon. (which makes this scheme fragile in a different way from what's described-- that semicolon may be in the middle of the line and so may end the comment earlier than intended, or it may be several lines later and so may end the comment later than intended).
    – Don Hatch
    Commented Jul 8 at 20:53
49

I don't know how future and/or exotic browsers will interpret non-official hacks like //, so I’d rather stick with the appropriate notation:

li {
    float:left;
    text-indent:0px;
    /* list-style-type:none; */
}
5
  • 5
    @AdamMilward - you can read about revision control at Wikipedia. You definitely want to use something to manage your code, of all types. CVS is the grand-daddy (with RCS as its ancestor), followed by SVN then a rash of (relative) newcomers like Mercurial, Perforce, Bazaar, etc, etc, etc. If you're coming at this fresh, I recommend git. It's what all the cool kids are using these days. :-)
    – ghoti
    Commented Sep 14, 2012 at 5:04
  • 12
    Commented-out code is a code smell? Generally spoken, I find this statement too harsh. Often it is useful for documentation purposes, for showing pseudo code or, in general terms, whenever it helps a future person looking at the code file. Commented Mar 19, 2014 at 23:45
  • @Jan-PhilipGehrcke: Yeah, or even just between revisions. Even though I use git, I don't commit every time I edit a line, so often several times per commit I will test that changes are behaving as intended by commenting-out specific lines and seeing what happens. My commits correspond to discrete changes (fixing a small bug; refactoring/tidying intended to have identical functionality/correctness; etc.) that are tested and working (unless otherwise specified in the commit message on occasions where transitional commits must be broken in order to be discrete, but the breakage is known). Commented Jan 20, 2015 at 18:57
  • @Jan-PhilipGehrcke: In other words, my commit strategy is intended to make the history clearer such that it is easier to study and track down regressions in the future, rather than as a replacement for commenting-out code between commits in the present. So I agree that commenting-out code is not always a smell. Commented Jan 20, 2015 at 18:58
  • 2
    Um, that's wayyyy too narrow, draconian and opinionated. Commented out code may not be good for a final product, and I don't put code into gates with commented code, but for prototyping and experimenting it's just fine, and single line comments are vastly more convenient for experimenting with CSS than /* */
    – clearlight
    Commented Dec 29, 2015 at 16:37
8

I recently read this article which sheds a lot of light on single line commenting practice in CSS.

CSS allows 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".

So in your code snippet list-style-type:none is the next CSS construct and it gets commented out.

li {
    float:left;
    //list-style-type:none;
    text-indent:0px;
}

Similarly, in the below code snippet

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

the // will comment out the first @keyframes declaration.

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. So in the below snippet

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

This will comment out the .foo block.

You can get more information via the linked article mentioned at the start.

1
  • 9
    That article is tongue in cheek.... Did you skip this part? "The astute among you will have noticed (or already known) that using // like this isn't really "commenting out" anything at all. Instead, it's just putting an invalid value into the stylesheet and relying on CSS's error-recovery rules to kill the next construct on the page and then recover gracefully. Because CSS's error recovery is well-defined, you can rely on every browser that implements it correctly to work in the expected way."
    – Dmiters
    Commented Mar 7, 2016 at 21:55
4

Yes, I think that using single-line comments in their current state is bad practice.

For starters, if you're working within a team environment, then code maintainability / readability is of paramount importance, and even if you work alone, writing maintainable code is still good practice, otherwise insanity will ensue.

When you start using single line comments both maintainability and readability are impeded, syntax highlighters within editors won't highlight your comment, and it'll become hard to distinguish comments from rules.

Comparison of single and multi-line comments

Further, single and multi-line comments aren't inclusively interchangeable, for instance you can't use raw-text comments without using a hack, rather you can only comment out constructs //.foo {...} or rules .foo {//height:10px}.

Uninterchangeable instance:

ul.images {
    padding: 0;
    //static height value
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value
    height: 270px;*/
    margin: 0 auto;
}

Now interchangeable (due to empty constructor hack):

ul.images {
    padding: 0;
    //static height value{};
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value*/
    height: 270px;
    margin: 0 auto;
}

While using the constructor {}; as a postfix will work, it does IMO defeat the purpose of using it, because you'll use more characters; a multi-line comment uses four characters, /**/, whereas a single-line comment with the hack uses five characters, //{};

The last caveat of single-line comments which hasn't been mentioned yet, is that Chrome developer tools will hide commented-out rules, rather than allowing you to toggle them.

Chrome developer tools (multi-line comment):

Enter image description here

Chrome developer tools (single-line comment):

Enter image description here

A good use case, IMO, for single-line comments would be when you need to comment-out an entire constructor, which is really long (the example won't be).

Commenting out an entire constructor

//ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}

/*ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}*/

In closing, if you are trying to debug something during development, I don't see the harm in commenting-out a constructor with single-line comments to weed out a bug. If you're debugging then it'll be temporary. That said, I don't see any use case for raw-text, so I definitely wouldn't advocate using them there.

3

According to the Working Draft, there's nothing like a single-line comment.

1
  • 2
    You are right, but there's nothing like // for using comments. Commented Sep 6, 2012 at 11:47
3

I use // to 'comment out' lines in .css files all the time. Because it's bound to a shortcut in Vim, and I always forget what I am editing. In JavaScript it's really handy to comment out blocks of code, test the code, and 'comment in' the block of code again (shortcuts, yes).

But when I tidy op my .css file, I use the following constructs to more easily move declarations in and out of scope:

.pin {
    /*
    position: absolute;
    background: url(buttons-3x3.png);
    background-color: red;
    */
    height:50px;
    width:150px;
    position: relative;
}


.shadow {
    margin-top: 25px;
    margin-left: 25px;
    margin-left: 60px;
    width:50px;
    height:50px;
    background: url(playground.png) -400px -100px;
    position: relative;
    position: absolute;
}

In .pin I can remove a line and add it to the commented area and vice versa. In .shadow I just redeclare the same property with a different value.

It's a pain.

!important

2

I would recommend not commenting out CSS like this when it's not needed. Remove the stuff that you don't need and commit it to your SVN or GIT repository. Let it do its job and keep track of history for you. Accumulated comments like this become cruft that make your code harder to read and understand.

1

As others have said, using a double slash is not standards compliant, but if you really want to use it AND want to be standards compliant AND you have gcc installed, you can run your CSS through cpp -P to strip out all double slash and /* ... */ comments from the CSS. As a bonus, you can use macros, includes and conditionals, and comments don't get downloaded by the browser (minor performance boost).

The only major problem is using standalone id tags (i.e., #para { ... }) where cpp barfs. Solution there is double the # (to ##) and pass the output through sed, like this:

cpp -P site.cssin | sed -e 's/^##/#/' >site.css

I'm sure there are better CSS-oriented preprocessors, but this worked for me.

1

For inline CSS comments, I use:

.myDiv {
    @width:750px;  
}

or any character you want (i.e. *@!ZZ) So, property becomes unknown and not readable by css.

0

Comment in HTML:

<!--........................-->
<!--  <input type="text" name="lastname">-->

Comment in JavaScript:

Single-line comment:

Two slashes, "//", in front of the code:

//document.write("Try this");

Multi-line comment:

<script type="text/javascript">
    <!--

    /* document.write("try this!");

    document.write("try this"); */
    //-->

</script>

Comment code in CSS:

/*
.tblemp {
color:red; }

*/

More details

0

Just to add some further information and confirming the "only use /* comments" rule. A customer who has access to the website folder just choose by himself to comment out a single line using this:

//*  comment here   *//

Actually Chrome and Safari will ignore ANYTHING that follows this line; I would call it a "CSS killer".

1
  • 3
    ummm I would instead call that a syntax error that causes the css parser to ignore the offending block...
    – Dmiters
    Commented Mar 7, 2016 at 21:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.