在个人的注释风格中，是否在单行CSS前加//是一种不好的做法？

Question

我最近开始使用//来“注释”单行CSS代码。我理解我实际上没有注释掉这一行；我只是把它断开了（我应该使用/* ... */），但效果相同。然后，这一行以;结束，接下来的代码可以正常运行。

我可以将其删除，但通常情况下我不希望这样做，以防我以后想要重新添加它或者查看我曾经使用过的内容。

示例：

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

我能这样做吗，还是这可能会给我带来问题？

- Adam Milward

---

相关链接：https://dev59.com/x2XWa4cB1Zd3GeqPM3Ks。不要在CSS中使用`//`注释。请勿使用`//`注释在CSS中。 - thirtydot

是的，非常糟糕...尽管我仍然会用它来实例化“我只是暂时注释掉这个并看看会发生什么”。 - Nate C-K

有人请告诉开发人员，简单易用是更好的选择，为了快速评论而必须移动光标并按下六个键盘按键是荒谬的。*只需要两个按键。 - gseattle

这个问题是基于观点的，应该被关闭。提问者已经知道不允许并且不起作用，现在询问“是否仍然可以”。是否允许存在错误代码是一个观点问题。 - TylerH

Answer 1

我发现有很多人抱怨这个问题，因为这是一个旧问题，所以可能有很多人正在阅读它，想知道它是否仍然正确，或者是否实际上存在一个标准。让我来澄清一下。以下是严格的CSS注释策略的核心原因：

#1 它不是标准

自CSS 2.1以来至少已经标准化，注释只能用 /* 和 */ 包裹起来。虽然一些浏览器可以容忍 //，但它们不应该这样做，距离有人说"哦，是非标准的" 或 "嘿！那不标准，修复它！”只有一英寸；然后你猜怎么着，你的CSS代码，本来在工作，现在对成千上万的人来说不再有效（并且可能已经对其他数百人无效）。我将补充说明：<!-- 和 --> 是被允许的，但只有（我是指只有）当它们出现在HTML文档中时，而不是在 .css 源文件中。如果您的浏览器太老了，无法跳过 <style> 标签，那么十年前就应该换个新浏览器了。即使Lynx和其他文本浏览器知道不要阅读它们，因此注释它仅在非常孤立的情况下有用，其中硬件和软件被锁定在它们目前的工作状态中。

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

单行注释从任何一行开始以 // 开头，在“换行符”上终止，这不是跨平台标准化字符。更糟糕的是，某些平台可能有一个换行符，或者两个...当这些平台混合在一起时，一个换行符可能会丢失，然后您的终止符就没了...并且可能已经被注释掉的一些或全部代码是不应该被注释的代码，你不必是一个天才就知道那可能带来的后果，特别是如果你唯一通过CSS控制你网站的特性。

#3 标准对所有人友好且统一

在每台电脑上，无论是什么架构、操作系统等，/*和*/分隔符始终都是相同的字符。

#4 换行符是空白符

（是的，还有一个原因）换行符（在CSS和许多其他语言中）被认为是空白符，而 */ 不是空白符，对吧？如果你现在想一想，应该很清楚了，你不应该使用空格来终止注释，特别是因为空格可以被许多HTML/CSS解析器删除或重新格式化而你甚至不知道。

#5 CSS！= C/C++

现在，如果你要飞起来对我大喊 "嘿，但是C++..."，请记住，那些编译器和集成开发环境都内置了大量的换行检查和检测，所以它们可以处理。大多数编译器不会重新格式化你的代码，除非被要求这样做，而许多IDE通常会询问你的文档使用了哪种换行符，如果无法自动猜测。如果每次加载CSS页面时都要这样做，那么试着想象一下这将是多么可怕的事情。此外，C/C++代码不是在运行时解析的，而是编译的，所以大部分时间，用户根本没有得到有问题的文档。源文件在传送给终端用户之前已经删除了注释。CSS源直接传送到用户的浏览器，必须非常强健，因为它不知道另一端是什么，因此需要准备好任何终端用户拥有或执行的事情，而不是任何开发人员拥有或执行的事情！

#6 这很不方便

不，必须输入额外的*/非常烦人，但这主要归咎于CSS编辑软件开发人员不提供自动完成功能。如果使用一个能够做到这一点的专业编辑器，最好是开箱即用的，那么你会发现它和使用//一样容易。养成键入/**/然后退格2个字符的习惯，这将有助于你记住并使其更加容易。更好的方法是，可以设置一个快捷键来替你实现这些。Windows和Linux都有强大的工具来允许这样做（KDE在这方面非常出色）。

我希望这可以帮助每个人理解“为什么”背后的“如何”，并记住，仅仅因为某些东西适合你，不意味着它就是标准的。总结一下：

是的，使用它是不好的做法，说“不”双斜杠！！！ 如果你需要一个视觉提示来提醒你这个重要的事实，只需将这个图像烙印在你的脑海中（感谢那些没有更好事情可做的人制作了这样的图片）：

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

参考资料：

- W3C：CSS 2.1工作草案：注释字符。 - W3C：CSS语法模块3级：解析器到字符解释的铁路图。 - Stack Overflow：各种关于与本文主题基本相同的文章。 - w3schools：CSS 3语法标准（引用了W3C）。

sitepoint: CSS语法注释中应避免使用双斜线。

mozilla|mdn: 放宽的CSS 3处理规则允许在输入文件中使用双斜线。

- osirisgothra

---

你的参考资料中为什么没有任何链接？ - BoltClock

你发布了那个没有双斜杠的示意图却没得到更多声望，这绝对是不可原谅的罪行。 - Nate C-K

Answer 2

我不知道未来和/或异域浏览器会如何解释非官方的黑客技巧，例如//，因此我更倾向于使用适当的符号表示：

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

- Dennis Traub

---

@AdamMilward - 你可以在维基百科上了解有关版本控制的知识。无论何种类型的代码，你都一定想使用某种工具来管理它们。CVS是最老牌的（其祖先为RCS），其次是SVN，然后是一系列相对较新的工具，如Mercurial、Perforce、Bazaar等等。如果你是新手，我推荐使用git。这是当今所有时髦的年轻人都在使用的工具。 :-) - ghoti

注释掉的代码是一种代码异味吗？一般而言，我认为这种说法太苛刻了。往往注释代码对于文档目的是有用的，可以展示伪代码或者在总体上帮助未来查看代码文件的人。 - Dr. Jan-Philip Gehrcke

@Jan-PhilipGehrcke：是的，或者甚至只是在版本之间。尽管我使用git，但我不会在每次编辑一行时都提交，因此通常每次提交时我都会测试更改是否按预期运行，方法是注释掉特定行并查看发生了什么。我的提交对应于离散的更改（修复小错误；重构/整理旨在具有相同的功能/正确性等），这些更改已经经过测试并且可以正常工作（除非在提交消息中另有说明，在必须分解为离散的过渡提交的情况下，但已知存在断裂）。 - James Haigh

@Jan-PhilipGehrcke：换句话说，我的提交策略旨在使历史记录更清晰，以便将来更容易研究和跟踪回归，而不是作为当前在提交之间注释代码的替代方法。因此，我同意注释掉代码并不总是一种不好的做法。 - James Haigh

嗯，那太狭隘、严苛和主观了。注释掉的代码可能不适合最终产品，我不会将代码与注释代码一起放入门中，但对于原型设计和实验来说，这是完全可以的，而单行注释在使用 CSS 进行实验时要方便得多，比如 /* */。 - clearlight

Answer 3

我最近读了这篇文章，它对CSS中单行注释的实践进行了详细解释。

CSS允许您使用//。它不完全是一种行注释，而是一种“下一个构造注释”。也就是说，每当您使用//时，下一个CSS结构（无论是声明还是块）都将被“注释掉”。

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

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

同样地，在下面的代码片段中：

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }
}

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

如果你试着使用//来写样式表的注释，你要小心——原始文本不是CSS结构，所以它会忽略它并注释掉页面中下一个结构。因此，在下面的代码片段中：

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

这将注释掉 .foo 块。

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

- Naveen

---

那篇文章是半开玩笑的......你跳过这部分了吗？“敏锐的读者可能已经注意到（或已经知道），像这样使用//实际上并没有真正地“注释掉”任何东西。相反，它只是在样式表中放置一个无效值，并依赖CSS的错误恢复规则来清除页面上的下一个结构，然后优雅地恢复。由于CSS的错误恢复是明确定义的，您可以依靠每个正确实现它的浏览器按照预期方式工作。” - Dmiters

Answer 4

根据工作草案, 没有像单行注释这样的东西。

- Robert Heine

---

你说得没错，但是没有什么比使用注释符号//更好的了。 - Robert Heine

Answer 5

我认为现有的单行注释使用方法是不好的。首先，如果你在团队环境中工作，代码的可维护性和可读性至关重要，即使你独自工作，编写可维护的代码也是良好的实践，否则你可能会变得疯狂。

当你开始使用单行注释时，可维护性和可读性都会受到影响。编辑器中的语法高亮显示不会突出显示你的注释，这使得很难区分注释和规则。

此外，单行注释和多行注释不能相互替换，例如你不能使用原始文本注释而不使用一些技巧，只能注释掉构造//.foo {...}或规则.foo {//height:10px}。

不能相互替换的实例：

ul.images {
    padding: 0;
    //static height value
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value
    height: 270px;*/
    margin: 0 auto;
}

现在可以互换（由于空构造函数的“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;
}

使用构造函数{}作为后缀虽然可行，但这样做会打乱原本的使用方法，因为你需要使用更多字符；一个多行注释只需四个字符/**/，而通过hack的单行注释则需要五个字符//{}; 还有一点值得注意的是单行注释的一个限制，即Chrome开发工具会隐藏被注释掉的规则，而不是允许您切换它们。 Chrome开发者工具(多行注释)： Chrome开发者工具(单行注释)： 在我看来，如果你需要注释掉一个非常长的构造函数（例子并不复杂），那么单行注释会是一个很好的用例。

//ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}

/*ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}*/

总之，如果您在开发过程中尝试调试某些内容，我认为使用单行注释注释掉构造函数以排除错误是无害的。如果您正在进行调试，则这将是临时的。话虽如此，我并不认为原始文本有任何用途，因此我绝对不会建议在那里使用它们。

- Jack

Answer 6

我经常使用//在.css文件中注释掉一些行。因为它是Vim中的快捷键，而我总是会忘记正在编辑什么。在JavaScript中，注释掉一段代码块、测试代码并再次“取消注释”非常方便（有快捷键）。

但是当我整理我的.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;
}

在.pin中，我可以将一行内容从代码中删除并添加到注释区域中，反之亦然。而在.shadow中，我只需要重新声明具有不同值的相同属性。

这真是一件麻烦事。 !important

- user37057

Answer 7

我建议不要在不需要的情况下注释掉CSS。删除您不需要的内容并将其提交到您的SVN或GIT存储库中。让它发挥作用并为您跟踪历史记录。这样累积的注释会变成垃圾，使您的代码更难阅读和理解。

- duffymo

Answer 8

正如其他人所说，使用双斜杠不符合标准，但如果您真的想使用它并且想符合标准，并且您安装了gcc，则可以通过cpp -P运行CSS来剥离CSS中的所有双斜杠和/*...*/注释。作为奖励，您可以使用宏、包含和条件语句，而且浏览器不会下载注释（轻微的性能提升）。

唯一的主要问题是在使用独立id标签时（即#para { ... }），cpp会出错。解决方法是将#加倍（变为##），然后通过sed传递输出，像这样：

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

我相信有更好的面向CSS的预处理器，但这个对我来说很有效。

- AndrewTPhoto

Answer 9

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

.myDiv {
    @width:750px;  
}

或者你可以选择任何字符（例如*@!ZZ），这样属性就变成了未知的，无法被CSS读取。

- T.Todua

Answer 10

在HTML中的注释：

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

JavaScript中的注释：

单行注释：

在代码前面使用两个斜杠"//"：

//document.write("Try this");

多行注释：

<script type="text/javascript">
    <!--

    /* document.write("try this!");

    document.write("try this"); */
    //-->

</script>

在CSS中注释代码：

/*
.tblemp {
color:red; }

*/

更多细节

- Tamilan