68

我最近开始使用//“注释”出单行 CSS 代码。我知道我实际上并没有评论这条线;我只是打破它(我应该使用/* ... */),但它具有相同的效果。然后该行由 终止,;并且以下代码可以正常工作。

我可以删除它,但我通常不想这样做,以防我想稍后再放回去,或者如果我回来看看我一直在使用什么。

例子:

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

我可以逃脱惩罚吗,还是可能会给我带来麻烦?

4

11 回答 11

84

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

#1 这不是标准的

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

#2 它不是(非常)跨平台友好的

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

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

/*和分隔符在*/每台计算机上总是相同的字符,无论架构、操作系统等如何。

#4 换行符是空格

最后一个原因(是的,还有一个),换行符(在 CSS 和许多其他语言中)被认为是空格,*/不是空格吗?如果你在这一点上考虑一下,应该很清楚你不应该使用空格来终止注释,特别是因为空格已经并且可以被许多 HTML/CSS 解析器剥离,或者在你甚至不知道的情况下重新格式化。

#5 CSS != C/C++

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

#6 不方便

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


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

是的,使用它是不好的做法,对双斜线说不! 如果您需要视觉辅助来提醒您这一重要事实,只需将这张图片刻录在您的脑海中(感谢你们中那些除了制作这样的图片而无事可做的人):

没有双斜线


PS:如果你真的想向制定/破坏 CSS 标准的人(W3C、肘部)抱怨什么,有人会开始讨论“!important”关键字的冗长和错误!但这不是这个问题的一部分,所以我不会进入它。

参考

  • W3CCSS 2.1 工作草案:注释字符。
  • W3CCSS 语法模块级别 3:解析器到字符解释的铁路图。
  • Stack Overflow各种 Stack Overflow 文章,主题几乎与这篇文章相同。
  • w3schoolsCSS 3 语法标准(又引用了 W3C)。
  • sitepoint关于“不使用双斜杠”的 CSS 语法注释。
  • mozilla|mdn宽松的 CSS 3 处理允许在输入文件中使用双斜杠。
于 2013-11-25T12:05:19.767 回答
49

我不知道未来和/或异国情调的浏览器将如何解释非官方的黑客攻击//,所以我宁愿坚持使用适当的符号:

li {
    float:left;
    text-indent:0px;
    /* list-style-type:none; */
}
于 2012-09-06T11:26:08.873 回答
6

我最近阅读了这篇文章,它为 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块。

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

于 2014-01-14T07:28:12.473 回答
4

根据工作草案,没有什么能比得上单行注释。

于 2012-09-06T11:25:11.327 回答
3

//一直在 .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我只是用不同的值重新声明相同的属性。

这是一种痛苦。

!重要的

于 2013-12-29T12:42:45.060 回答
3

是的,我认为在当前状态下使用单行注释是不好的做法。

对于初学者来说,如果您在团队环境中工作,那么代码的可维护性/可读性是至关重要的,即使您独自工作,编写可维护的代码仍然是一种好习惯,否则就会出现精神错乱。

当您开始使用单行注释时,可维护性和可读性都会受到阻碍,编辑器中的语法高亮不会突出显示您的注释,并且很难将注释与规则区分开来。

单行和多行注释的比较

此外,单行和多行注释不能完全互换,例如,您不能在不使用 hack 的情况下使用原始文本注释,而只能注释掉结构//.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 开发者工具(单行注释):

在此处输入图像描述

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

注释掉整个构造函数

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

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

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

于 2014-07-24T19:45:18.357 回答
2

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

于 2012-09-06T11:25:25.207 回答
1

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

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

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

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

于 2013-12-23T06:09:14.840 回答
1

对于内联 CSS 注释,我使用:

.myDiv {
    @width:750px;  
}

或您想要的任何字符(即*@!ZZ)因此,属性变得未知并且css无法读取。

于 2014-05-13T20:30:11.217 回答
0

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

*/

更多细节

于 2015-10-21T18:23:56.863 回答
0

只是为了添加一些进一步的信息并确认“仅使用 /* 注释”规则。有权访问网站文件夹的客户只需自己选择使用以下命令注释掉一行:

//*  comment here   *//

实际上, ChromeSafari会忽略此行之后的任何内容;我会称它为“CSS 杀手”。

于 2016-02-17T12:14:34.317 回答