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

Question

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

我可以删除它,但我常常不想这样,以防万一我想稍后再把它放回去,或者看看我回来的时候一直在使用它.

例:

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

我可以逃脱这个,还是可能会给我带来麻烦？

Answer 1

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

#1这不是标准

标准化至少从CSS 2.1开始,评论仅限于/*和*/.虽然有些浏览器可以容忍//,但它们不应该,并且只有一英寸的人说"哦,是的,这是非标准的"或"嘿!这是非标准的,修复它!"; 然后猜猜你的CSS代码,哪些WAS正在工作,现在不适用于成千上万的人(并且可能已经没有为数百个人工作).我将添加它<!--并且-->只允许(但我只是指)它们出现在HTML文档中,而不是在.css源文件中.如果您的浏览器太旧而无法跳过<style>标签,那么10年前可能是新浏览器的时间.即使是Lynx和其他文本浏览器也知道不要阅读它们,因此将它注释掉它只适用于非常孤立的情况,即硬件和软件在当前工作状态下处于内陆状态.

#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"关键字是多么不必要的长和错!但这不是这个问题的一部分,所以我不会进入它.

参考

• W3C:CSS 2.1工作草案:评论字符.
• W3C:CSS语法模块3级:解析器到字符解释的铁路图.
• Stack Overflow:各种Stack Overflow文章,其主题与此实际相同.
• w3schools:CSS 3语法标准(反过来引用W3C).
• sitepoint:"不使用双斜杠"的CSS语法注释.
• mozilla | mdn:轻松的CSS 3处理允许输入文件中的双斜杠.

Answer 2

首要的是:注释掉的代码是代码气味,应该避免.我假设您正在使用像Git这样的VCS ,它可以为您处理历史代码.

但是如果你真的想以这种方式工作:你不知道未来和/或异国情调的浏览器将如何解释非官方的黑客攻击//,所以你最好坚持使用适当的符号:

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

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

您可以通过一开始提到的链接文章获得更多信息.