我需要CSS中的新行吗


Do I need new lines in CSS at all?

我知道这可能是一个微不足道的问题,但我在谷歌上找不到任何东西。

CSS中是否有需要有新行的地方?例如,我有以下代码块:

#headertitle {
background: -o-linear-gradient(left,  #3fd0e4 0%,#18709f 100%); /* Opera 11.10+ */
background: linear-gradient(to right,  #3fd0e4 0%,#18709f 100%); /* W3C */
width:950px;
height:150px;
font-family:rw_SegoePrint_bold,'Segoe Print',OpenSansRegular,Verdana,sans-serif;
font-size:140px;
text-align:center;
position: absolute;
left: 50%;
top: 10px;
margin-left:-475px;
z-index:2;
}

我可以简单地删除新行,最后得到#headertitle{background:-o-linear-gradient(left, #3fd0e4 0%,#18709f 100%);background: linear-gradient(to right, #3fd0e4 0%,#18709f 100%);width:950px;height:150px;font-family:rw_SegoePrint_bold,'Segoe Print',OpenSansRegular,Verdana,sans-serif;font-size:140px;text-align:center;position:absolute;left:50%;top:10px;margin-left:-475px;z-index:2;},它仍然可以完美地解析,正如我所期望的那样。然而,CSS编码中是否有任何实例明确需要出现新行?或者我可以用""(使用PHP)替换"'n"吗?

任何一种方式都是正确的。前者更适合用于开发目的,因为它可读。后者更适合用于生产目的,因为它会导致更小的文件大小,尤其是如果您删除了所有不必要的空间。

您完全正确,不需要注释或换行符。只要在属性末尾使用;即可。

请查看PHP Minify,在那里你可以拥有完整的CSS、JS和HTML,并带有换行符,或者你希望它们可读。与用PHP minify缩小它们相比,这可以删除换行符、注释和客户端不需要的一切!如果需要,您甚至可以将文件与组组合。

否,不需要换行符。

这是一篇关于减少代码大小的文章:10个小CSS文件的提示

我知道有大约20个答案,但我想添加我格式化css的方式。

body { background: green; }
ul { margin: 0 50px 0 0; }
    ul li { list-style-type: circle; }

这最小化了换行符,但保持了代码的可读性。另外,我花在寻找选择器上的时间比花在寻找属性上的时间要多。

请允许我在此讨论中再添加一个建议。如今,使用css预编译器变得越来越普遍。就我个人而言,我使用的是LESS,但也有其他好的,比如SASS。

优点是您可以更快地编写和更新代码,因为您可以使用嵌套、变量、合并文件甚至基本函数(在LESS中称为mixin)。

完成开发后,可以将.less文件编译为标准的.css文件。您可以在服务器上通过javascript在客户端即时执行此操作,但我更喜欢在将文件上传到服务器之前对其进行编译(性能更好)。有很多优秀的编译器,其中大多数都提供了选项来缩小css(从而删除所有空白、换行符和注释)。

就我个人而言,我使用Codekit作为我的编译器(仅限MAC),这非常值得,只需支付少量许可费。它还有很多其他很棒的功能,比如缩小和验证Javascript,优化图像,甚至实时css注入(不需要刷新页面),这在开发过程中非常棒。它会持续监控您的项目,并在更改时自动编译。

一开始它可能看起来有点挑战性,但LESS实际上并没有那么难(与标准css非常相似),一旦你习惯了它,你就离不开它了。真是节省时间!