Question

CSS代码格式化问题：我有一个习惯，即在{启动新的CSS规则之前添加一个空格，如下所示：

body {
  font-size: 16px
}

body和{之间的这样的空格在整个css中加起来。

理想情况下，我更喜欢像这样编写规则（从而节省空白）：

body{
  font-size: 16px
}

实际上，我忘记了为什么这么做？

请注意，我有意简化了此处的示例以显示空白。当然，不需要从文件中删除此处的空间。但在具有2-3,000条规则的现实生活中，它可能会加起来。此外，我认为该位置的单个空格与其被删除的情况相比会压缩得很厉害。

我早就忘记了为什么我要添加那个奇怪的空格。删除是否安全？哪个浏览器需要空格？

Answer 1

你可能会添加空间，因为它读取/看起来更好。

可以安全删除，没有浏览器关心空格。任何CSS压缩器/优化器都将删除所有这些空格，换行符等。

现在人们很难手动优化他们的CSS，我的建议是让你的css可读和可持续，然后使用像YUI这样的压缩器/优化器。

Answer 2

互联网连接快。杀死你的是延迟，有时是几秒钟，而服务器正在等待你的回复通过网络进行。实际的文件传输只占用了总时间的一小部分。

鉴于一个体面的服务器设置也会发送gssip的css文件，我真的不认为它会在更大的方案中产生很大的不同，考虑到所涉及的所有其他开销。无论什么看起来最好，我都会坚持下去。

如果CSS文件确实达到了你认为这会产生影响的程度 - 正如另一张海报所说 - 缩小是前进的方式。并且不要忘记换行符或制表符占用空间的空间。

Answer 3

我实际上更喜欢第三种选择：

class
{
    ...
}

在你有一个适用于几个类的样式的情况下，我发现它更具可读性，如下所示：

classA,
classB,
classC
{
    ...
}

但当然，最终完全取决于个人偏好。以易于阅读，理解和维护的方式编写代码，并使用缩小器/压缩器来优化生产环境中的性能。

Answer 4

删除它是非常安全的。如果你对CSS进行了缩小，那么无论如何它都会删除它们，并且它的优良做法是缩小你的CSS，因为它使用较少的带宽来移动CSS。

Answer 5

CSS像大多数编程语言一样跳过任何空格。规则和开口支架之间的额外空间使其更易于阅读。个人body{看起来很难看。

你在CSS中放置空格取决于你，但它有助于使它可读。

你愿意这样：

body{
text-align:center;
font-size:10pt;
}

还是这个？

body {
  text-align: center;
  font-size: 10pt;
}

Answer 6

有些人用css节省空间会将规则放在一行上。这样可以节省更多空间，因为您没有新行字符，而且它仍然具有可读性。

body { font-size: 16px; font-weight: bold; }

鉴于css在大多数网站上被缓存，即使2-3000行也不会为你节省太多空间，而且性能提升无论如何都可能微不足道。

编辑：将大多数人改为某些人。

Answer 7

如果您不得不担心CSS文件中不需要的空格数量有助于下载批量，那么您可能还有其他问题在其他地方酝酿..

个人而言，我总是因为担心这些事情而可读性。我自己喜欢空间

Answer 8

是的，你可以删除空格，事实上如果你真的想保存字节，你也可以删除“font-size：16px”中的空格。

话虽如此，大多数服务器和浏览器仍然通过网络gzip网页内容，因此实际节省的空间将是最小的，可能不值得花费可读性。

Answer 9

body {

看起来更好（至少我是这么认为的。）

不要考虑保存几个字节，无论您如何格式化代码，都应该在部署之前通过css compression utility运行它。根据您的开发环境，您可以自动执行此任务。

您还应该将您的http服务器配置为对css使用gzip压缩（这将比正文和{之间的空白更多地保存）。

Answer 10

我最喜欢的格式是这样的：

body{ margin:0;
      font-family:Verdana, Tahoma, Arial, sans-serif;
      padding:0;}

仅为最后一个'}'char创建一个新行似乎很愚蠢。对我来说它似乎仍然可读，但缺点是尝试自动格式化CSS的CSS编辑并不是那么多。我通常必须关闭CSS自动格式化或手动将其分开。

Answer 11

嗯，我个人根本没有在CSS上使用空格，我觉得它很难读，只是习惯了它！