我最近开始使用//
来“注释”单行CSS代码。我理解我实际上没有注释掉这一行;我只是把它断开了(我应该使用/* ... */
),但效果相同。然后,这一行以;
结束,接下来的代码可以正常运行。
我可以将其删除,但通常情况下我不希望这样做,以防我以后想要重新添加它或者查看我曾经使用过的内容。
示例:
li{
float:left;
//list-style-type:none;
text-indent:0px;
}
我能这样做吗,还是这可能会给我带来问题?
我发现有很多人抱怨这个问题,因为这是一个旧问题,所以可能有很多人正在阅读它,想知道它是否仍然正确,或者是否实际上存在一个标准。让我来澄清一下。以下是严格的CSS注释策略的核心原因:
自CSS 2.1以来至少已经标准化,注释只能用 /*
和 */
包裹起来。虽然一些浏览器可以容忍 //
,但它们不应该这样做,距离有人说"哦,是非标准的" 或 "嘿!那不标准,修复它!”只有一英寸;然后你猜怎么着,你的CSS代码,本来在工作,现在对成千上万的人来说不再有效(并且可能已经对其他数百人无效)。我将补充说明:<!--
和 -->
是被允许的,但只有(我是指只有)当它们出现在HTML文档中时,而不是在 .css 源文件中。如果您的浏览器太老了,无法跳过 <style>
标签,那么十年前就应该换个新浏览器了。即使Lynx和其他文本浏览器知道不要阅读它们,因此注释它仅在非常孤立的情况下有用,其中硬件和软件被锁定在它们目前的工作状态中。
单行注释从任何一行开始以 //
开头,在“换行符”上终止,这不是跨平台标准化字符。更糟糕的是,某些平台可能有一个换行符,或者两个...当这些平台混合在一起时,一个换行符可能会丢失,然后您的终止符就没了...并且可能已经被注释掉的一些或全部代码是不应该被注释的代码,你不必是一个天才就知道那可能带来的后果,特别是如果你唯一通过CSS控制你网站的特性。
在每台电脑上,无论是什么架构、操作系统等,/*
和*/
分隔符始终都是相同的字符。
(是的,还有一个原因)换行符(在CSS和许多其他语言中)被认为是空白符,而 */
不是空白符,对吧?如果你现在想一想,应该很清楚了,你不应该使用空格来终止注释,特别是因为空格可以被许多HTML/CSS解析器删除或重新格式化而你甚至不知道。
现在,如果你要飞起来对我大喊 "嘿,但是C++...",请记住,那些编译器和集成开发环境都内置了大量的换行检查和检测,所以它们可以处理。大多数编译器不会重新格式化你的代码,除非被要求这样做,而许多IDE通常会询问你的文档使用了哪种换行符,如果无法自动猜测。如果每次加载CSS页面时都要这样做,那么试着想象一下这将是多么可怕的事情。此外,C/C++代码不是在运行时解析的,而是编译的,所以大部分时间,用户根本没有得到有问题的文档。源文件在传送给终端用户之前已经删除了注释。CSS源直接传送到用户的浏览器,必须非常强健,因为它不知道另一端是什么,因此需要准备好任何终端用户拥有或执行的事情,而不是任何开发人员拥有或执行的事情!
*/
非常烦人,但这主要归咎于CSS编辑软件开发人员不提供自动完成功能。如果使用一个能够做到这一点的专业编辑器,最好是开箱即用的,那么你会发现它和使用//
一样容易。养成键入/**/
然后退格2个字符的习惯,这将有助于你记住并使其更加容易。更好的方法是,可以设置一个快捷键来替你实现这些。Windows和Linux都有强大的工具来允许这样做(KDE在这方面非常出色)。是的,使用它是不好的做法,说“不”双斜杠!!! 如果你需要一个视觉提示来提醒你这个重要的事实,只需将这个图像烙印在你的脑海中(感谢那些没有更好事情可做的人制作了这样的图片):
我不知道未来和/或异域浏览器会如何解释非官方的黑客技巧,例如//
,因此我更倾向于使用适当的符号表示:
li {
float:left;
text-indent:0px;
/* list-style-type:none; */
}
//
。它不完全是一种行注释,而是一种“下一个构造注释”。也就是说,每当您使用//
时,下一个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
块。
您可以通过开头提到的链接文章获取更多信息。
我认为现有的单行注释使用方法是不好的。首先,如果你在团队环境中工作,代码的可维护性和可读性至关重要,即使你独自工作,编写可维护的代码也是良好的实践,否则你可能会变得疯狂。
当你开始使用单行注释时,可维护性和可读性都会受到影响。编辑器中的语法高亮显示不会突出显示你的注释,这使得很难区分注释和规则。
此外,单行注释和多行注释不能相互替换,例如你不能使用原始文本注释而不使用一些技巧,只能注释掉构造//.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开发者工具(多行注释):
//ul.images {
padding: 0;
height: 270px;
margin: 0 auto;
}
/*ul.images {
padding: 0;
height: 270px;
margin: 0 auto;
}*/
总之,如果您在开发过程中尝试调试某些内容,我认为使用单行注释注释掉构造函数以排除错误是无害的。如果您正在进行调试,则这将是临时的。话虽如此,我并不认为原始文本有任何用途,因此我绝对不会建议在那里使用它们。
//
在.css文件中注释掉一些行。因为它是Vim中的快捷键,而我总是会忘记正在编辑什么。在JavaScript中,注释掉一段代码块、测试代码并再次“取消注释”非常方便(有快捷键)。.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
中,我只需要重新声明具有不同值的相同属性。我建议不要在不需要的情况下注释掉CSS。删除您不需要的内容并将其提交到您的SVN或GIT存储库中。让它发挥作用并为您跟踪历史记录。这样累积的注释会变成垃圾,使您的代码更难阅读和理解。
cpp -P
运行CSS来剥离CSS中的所有双斜杠和/*...*/注释。作为奖励,您可以使用宏、包含和条件语句,而且浏览器不会下载注释(轻微的性能提升)。
唯一的主要问题是在使用独立id标签时(即#para { ... }
),cpp会出错。解决方法是将#加倍(变为##),然后通过sed传递输出,像这样:
cpp -P site.cssin | sed -e 's/^##/#/' >site.css
我相信有更好的面向CSS的预处理器,但这个对我来说很有效。
对于内联CSS注释,我使用:
.myDiv {
@width:750px;
}
*@!ZZ
),这样属性就变成了未知的,无法被CSS读取。在HTML中的注释:
<!--........................-->
<!-- <input type="text" name="lastname">-->
//document.write("Try this");
多行注释:
<script type="text/javascript">
<!--
/* document.write("try this!");
document.write("try this"); */
//-->
</script>
在CSS中注释代码:
/*
.tblemp {
color:red; }
*/
*
只需要两个按键。 - gseattle