单行与多行 CSS 格式答案

【问题标题】：Single-line vs multi-line CSS formatting单行与多行 CSS 格式
【发布时间】：2010-03-08 04:18:44
【问题描述】：

尽管有争议，但我听说大多数 CSS 开发人员更喜欢多行，因为可以轻松地在 CSS 文件中找到属性。但这不会使 CSS 文件变得更大，整体上更不可读吗？我认为单行可以让您更快地扫描 CSS 文件。有什么想法吗？

【问题讨论】：

【解决方案1】：

IMO 多行 CSS 更好，因为它更具可读性。但我建议你遵循团队的标准，不要浪费时间辩论:)

如果您担心 CSS 文件大小，那么您应该 minify / compress 它。

另外，如果您有时间，您可以花一些时间使用Official W3C CSS Test Suites 验证您的 CSS。

【讨论】：

我完全不同意。你对可读性的定义是什么？正如 Dan Herbert 在他对这篇文章的回复中所说，对于他（以及许多其他有经验的 css 编码人员）来说，当您有多个简单的示例来教授非经验丰富的用户时，单行实际上更具可读性。它需要一些时间来适应它，但根据我的经验，它是一个更好的系统，并且可以在工作时提供更好的性能。这与文件大小或教学方案无关，而与帮助开发有关。令人惊讶的是，似乎没有标准担心这一点，也没有担心样式中属性的顺序。

【解决方案2】：

这完全取决于您的团队的决定。但是，这是我对使用单行格式的原因的看法：

当我需要维护 CSS 时，我通常希望修改现有的选择器。如果每一行的开头都是一个新的选择器，而不仅仅是更多的样式声明，那么扫描文档以查找我想要找到的选择器会更容易。这也意味着更少的滚动来找到我需要的东西。

一旦我找到了我需要编辑的选择器，良好的语法突出显示可以让阅读特定选择器的规则变得容易，因此我不会因为将我的所有样式声明放在一行中而失去任何可读性。

话虽如此，我不会说它对文件大小有任何帮助。我依靠 YUI Compressor 自动为我压缩我的 CSS，而不是尝试手动维护一个有效声明的样式文档。

【讨论】：

【解决方案3】：

这是个人风格的问题 - 确保你选择的任何东西都是一致的。为了便于阅读，我个人倾向于将每个属性放在单独的一行中。

【讨论】：

【解决方案4】：

在开发时使用任何你觉得容易的风格。

您可以在部署时使用 CSS 缩小器来减小文件的大小。您可以找到许多有助于减小文件大小的 CSS 缩小器。

YUI compressor 不错。

【讨论】：

【解决方案5】：

就像 JavaScript 代码一样，您可能希望以符合团队标准的方式格式化 CSS，并让压缩器将其缩小以进行部署。

【讨论】：