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.