用 // 注释掉单行 CSS 是不好的做法吗？

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

提问by Adam Milward

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.

我最近开始使用//“注释”出单行 CSS 代码。我知道我实际上并没有注释掉该行；我只是打破它（我应该使用/* ... */），但它具有相同的效果。该行然后由 终止，;以下代码工作正常。

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?

我可以摆脱这个吗，或者它可能会给我带来问题吗？

采纳答案by Dennis Traub

First and foremost: Commented-out code is a code smelland should be avoided. I assume you're using a VCS like Git, which handles historical code for you.

首先也是最重要的：注释掉的代码是一种代码异味，应该避免。我假设您使用的是像Git这样的 VCS ，它会为您处理历史代码。

But if you really want to work this way: You don't know how future and/or exotic browsers will interpret non-official hacks like //, so you better stick with the appropriate notation:

但是，如果您真的想以这种方式工作：您不知道未来和/或异国浏览器将如何解释非官方黑客，如//，因此您最好坚持使用适当的符号：

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

回答by osirisgothra

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:

我看到有/很多人对此抱怨，因为这是一个较老的问题，可能有很多人在阅读它时想知道它是否仍然正确，或者是否真的有一个标准。请允许我净化空气。以下是严格的 CSS 评论政策的核心原因：

#1 It is not standard

#1 这不是标准的

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 Lynxand 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.

至少从 CSS 2.1 开始标准化，注释只能包含在/*和 中*/。虽然有些浏览器可以容忍//，但他们不应该容忍，并且距离有人说“哦，是的，这是非标准的”或“嘿！这是非标准的，修复它！”仅一英寸；然后你猜怎么着，你的 CSS 代码，以前的工作，现在不适合成千上万的人（并且可能已经不适合数百人）。我将添加它<!--并且-->只允许（我的意思是仅）当它们出现在 HTML 文档中时，而不是在 .css 源文件中。如果您的浏览器太旧以至于无法跳过<style>标签，那么 10 年前可能是时候换一个新浏览器了。连山猫和其他文本浏览器知道不会读取它们，因此将其注释掉仅在非常孤立的情况下才有用，即硬件和软件都处于当前工作状态。

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

#2 它不是（非常）跨平台友好的

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.

单行注释，在一行的任何地方开始//，以“换行”结尾，它不是跨平台的标准化字符。更糟糕的是，有些可能有一个换行符，或者 2 个......当这些平台混合在一起时，换行符可能会丢失，你的终止符就会出现......你的部分或全部代码现在被注释掉了不应该是，您不必是天才就知道这可能会产生什么后果，特别是如果您仅通过 CSS 控制站点的功能，许多人都这样做。

#3 The Standard IS Friendly and Uniform to All

#3 标准对所有人都是友好和统一的

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

的/*和*/分隔符总是要在每台计算机上相同的字符而不管架构，操作系统等

#4 Newlines are Whitespaces

#4 换行符是空格

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.

最后一个原因（是的，还有一个），换行符（在 CSS 和许多其他语言中）被认为是空格，*/不是空格吗？如果您此时考虑一下，应该很清楚您不应该使用空格来终止注释，尤其是因为空格可以并且可以被许多 HTML/CSS 解析器剥离，或者在您不知道的情况下重新格式化。

#5 CSS != C/C++

#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!

现在，如果您要飞离座位并对我大喊“嘿，但是 C++...”，请记住这些编译器和 IDE 内置了大量换行检查和检测，以便他们可以接受。除非被问到，大多数编译器不会重新格式化您的代码，而且许多 IDE 通常会问您如果您的文档无法自行猜测，您的文档使用的是哪种换行符。如果我们在每次加载时为最终用户使用 CSS 页面都这样做，想象一下它试图绕过的噩梦。此外，C/C++ 代码不会在运行时被解析和编译，所以很多时候，用户从一开始就不会得到有问题的文档。全世界不会在数百个平台和许多操作系统以及一百万种不同的浏览器上不断查看源文件。评论在到达最终用户之前被删除。CSS 源直接提供给用户的浏览器，并且必须非常灵活，不知道另一边是什么，因此需要注意的是，它必须为最终用户拥有或做的任何事情做好准备，而不是开发人员所做或拥有的任何事情！

#6 It's inconvenient

#6 不方便

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

不，必须输入额外的 非常烦人*/，但这主要归咎于不提供自动完成功能的 CSS 编辑软件的开发人员。如果您使用可以做到这一点的专用编辑器，最好是开箱即用，那么您会发现它与使用//. 养成打字/**/然后退格2的习惯，它会帮助你不要忘记并让它更容易一些。更好的是，您可以设置一个热键来为您放下它们。Windows 和 Linux 都有强大的工具来实现这一点（KDE 对此非常有用）。

---

---

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

是的，使用它是不好的做法，只需对双斜线说不！！！如果你需要视觉辅助来提醒你这个重要的事实，只要把这个图像刻在你的脑海里（感谢那些除了制作这样的图片之外别无他法的人）：

---

---

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.

PS：如果你真的想向那些制定/破坏 CSS 标准（W3C，肘部）的人抱怨，有人会开始讨论“！重要”关键字是多么不必要的长和错误！但这不是这个问题的一部分，所以我不会深入研究。

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.

• W3C：CSS 2.1 工作草案：注释字符。
• W3C：CSS 语法模块级别 3：解析器到字符解释的铁路图。
• Stack Overflow：各种 Stack Overflow 文章与这篇文章的主题几乎相同。
• w3schools：CSS 3 语法标准（反过来引用 W3C）。
• sitepoint：关于“不使用双斜线”的 CSS 语法注释。
• mozilla|mdn：宽松的 CSS 3 处理允许在输入文件中使用双斜线。

回答by Naveen

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

我最近阅读了这篇文章，它对 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".

CSS 允许你//在时尚之后使用。这不是行注释，而是下一个构造注释。也就是说，无论何时使用//，下一个 CSS 构造（声明或块）都将被“注释掉”。

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

所以在你的代码片段中list-style-type:none是下一个 CSS 结构，它被注释掉了。

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 @keyframesdeclaration.

该//会注释掉第一个@keyframes声明。

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

如果您尝试//仅用于在样式表中写入注释，则必须小心 - 原始文本不是 CSS 构造，因此它会查看过去并注释掉页面中的下一个构造。所以在下面的片段中

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

This will comment out the .fooblock.

这将注释掉.foo块。

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

您可以通过开头提到的链接文章获取更多信息。

回答by Rob

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

根据 Working Draft，没有什么比单行注释更好的了。

回答by user37057

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

我//一直在 .css 文件中“注释掉”行。因为它绑定到Vim 中的快捷方式，我总是忘记我在编辑什么。在 JavaScript 中，注释掉代码块、测试代码并再次“注释”代码块非常方便（快捷方式，是的）。

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

但是当我整理我的 .css 文件时，我使用以下结构来更轻松地将声明移入和移出作用域：

.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 .pinI can remove a line and add it to the commented area and vice versa. In .shadowI just redeclare the same property with a different value.

在.pin我可以删除一行并将其添加到注释区域，反之亦然。在.shadow我只是用不同的值重新声明相同的属性。

It's a pain.

这是一种痛苦。

!important

！重要的

回答by Hyman Tuck

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}.

此外，单行和多行注释不能完全互换，例如，您不能在不使用 hack 的情况下使用原始文本注释，而只能注释掉结构//.foo {...}或规则.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):

现在可以互换（由于空构造函数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 morecharacters; a multi-line comment uses four characters, /**/, whereas a single-line comment with the hack uses five characters, //{};

虽然使用构造函数{};作为后缀可以工作，但 IMO 确实违背了使用它的目的，因为您将使用更多字符；多行注释使用四个字符，/**/而带有 hack 的单行注释使用五个字符，//{};

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

尚未提及的单行注释的最后一个警告是Chrome开发人员工具将隐藏注释掉的规则，而不是允许您切换它们。

Chrome developer tools (multi-line comment):

Chrome 开发者工具（多行注释）：

Chrome developer tools (single-line comment):

Chrome 开发者工具（单行注释）：

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

对于单行注释，IMO 的一个很好的用例是当您需要注释掉整个构造函数时，它真的很长（示例不会）。

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.

最后，如果您在开发过程中尝试调试某些东西，我认为用单行注释注释掉构造函数以清除错误并没有什么害处。如果您正在调试，那么它将是暂时的。也就是说，我没有看到原始文本的任何用例，所以我绝对不提倡在那里使用它们。

回答by duffymo

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.

我建议不要在不需要时像这样注释掉 CSS。删除您不需要的内容并将其提交到您的 SVN 或 GIT 存储库。让它完成它的工作并为您跟踪历史。像这样累积的注释变得杂乱无章，使您的代码更难阅读和理解。

回答by AndrewTPhoto

As others have said, using a double slash is not standards compliant, but if you reallywant to use it AND want to be standards compliant AND you have gcc installed, you can run your CSS through cpp -Pto 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).

正如其他人所说，使用双斜杠不符合标准，但是如果您真的想使用它并且希望符合标准并且您安装了 gcc，您可以运行 CSScpp -P以去除所有双斜杠和 /* 。 .. */ 来自 CSS 的注释。作为奖励，您可以使用宏、包含和条件，并且浏览器不会下载评论（轻微的性能提升）。

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:

唯一的主要问题是#para { ... }在 cpp barfs 中使用独立的 id 标签（即）。解决方案有双#（到##）并通过sed传递输出，如下所示：

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

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

我确信有更好的面向 CSS 的预处理器，但这对我有用。

回答by T.Todua

For inline CSS comments, I use:

对于内联 CSS 注释，我使用：

.myDiv {
    @width:750px;  
}

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

或您想要的任何字符（即*@!ZZ）因此，属性变得未知且无法被 css 读取。

回答by Tamilan

Comment in HTML:

HTML 中的注释：

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

Comment in JavaScript:

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:

CSS 中的注释代码：

/*
.tblemp {
color:red; }

*/

More details

更多细节