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:
“//” needs to be added to CSS for commenting. #csswishlist
— Chris Morata (@chrismorata) April 18, 2012
Others agreed:
@chrismorata Hear, hear!
— Sophie S-K (@Tawreh) April 18, 2012
@chrismorata one commenting syntax to rule them all? That would be so fantastic.
— Front-End Conference (@frontendconf) April 18, 2012
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?
That’s the funny thing about CSS. The reason that works has nothing to do with it being a comment, but because //p is not a recognized CSS selector. Also, if you comment out a property/value pair that way, it should have the same effect. Again, because //color is not a valid CSS property.
Browsers are programmed to ignore any line of CSS they don’t understand. So they don’t even try to parse them. So technically you could put whatever you want in front of a line of CSS and it will still work like a comment, as long as it’s something the browser doesn’t understand. For debugging purposes, I rarely use CSS comments. I usually just throw a random character in front of a line or block I want to nullify, and that does the trick.
But I would not allow this type of quasi-comment to go into production code. There could be a problem with such code. I’m guessing the reason “//” is not a valid comment in CSS is that those characters are reserved for something else. I just don’t know what.
Anyways, thanks for writing this.
Thank YOU for that insight! Makes total sense. And I agree, I would not recommend anyone using this in production code for that reason. Good idea using a random character to effectively “comment” a line.
That doesn’t sound like a good idea to me at all. What happened to self-documenting code? If I was looking at his stylesheet and saw text with a random character in front of it, I would wonder what the hell was the original designer thinking?
Just because it works in the meantime doesn’t mean it will always work or that it is best practice. We use commenting syntax for readability and also for syntax highlighting applications like Sublime Text and Notepad++.
SJ, I think the main concept here is for it to be used for debugging purposes only. Neither Louis or I condoned the use of this in production code. Just a way to quickly test your code when in the development stage.