CSS commenting sucks. Or so I thought.

Last week, as I was debugging some CSS and getting incredibly frustrated at the fact I couldn’t easily comment out lines, I tweeted this:

Others agreed:

I had this whole article planned about how crappy the CSS commenting system is and how it should have the same commenting system as Javascript. I always thought I needed to use this little bit of code: /* to start it and */ to end it. I thought I had tested out using the double forward slash (//) to comment out a single line (similar to PHP and JS) a couple years ago to no avail.

That was until I tested double forward slash comments again while writing this article, and to my surprise it works. I thought maybe it was just the latest versions of browsers so I tested it in IE7-9, Firefox 3.6 up to the latest version, Safari, and Chrome, all seem to work. Here’s a quick fiddle to demonstrate it. It’s possible I could just be that dense.

Caveat: This isn’t valid CSS.

Do I dare say, “So what?” Try validating your CSS that uses vendor prefixes for unsupported CSS properties or CSS animations with keyframes. It won’t. I don’t know about you, but I’m going to use the hell out of this. I think it could be buggy in a few browsers, but the majority of time I’ll just be using it for testing and debugging so it won’t go into production code anyways.

The entire time I’ve been writing this article, I keep asking myself, “How the hell did I not know this before?” Going to do a bit of this now.

What do you think? Do you see any issues with this?