Is it bad practice to comment out single lines of CSS with //?

Question

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

Answer 1

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.

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):

Chrome developer tools (single-line comment):

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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; */
}