CSS 为什么在规则前添加空格？

发布于 2024-08-13 14:36:57 字数 449 浏览 2 评论 0原文

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

body {
  font-size: 16px
}

body 和 < code>{ 添加到整个 css 中。

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

body{
  font-size: 16px
}

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

请注意，我故意简化了此处的示例以显示空格。当然，不需要从文件中删除此处的空格。但在具有 2-3,000 条规则的现实项目中，这可能会增加。另外，我认为与删除该位置的单个空格相比，该位置的单个空格会被严重压缩。

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

原文

CSS code formatting question: I have an old habit of adding a single space before the { starts a new CSS rule, like this:

body {
  font-size: 16px
}

the whitespaces like this one between body and { add up throughout the css.

Ideally, i'd prefer writing my rules like so (and thus saving whitespace):

body{
  font-size: 16px
}

Actually, I forget why I do that?

Note that I intentionally simplified the example here to show the whitespace. Of course there is no need to remove the space here from the file. But in real life projects with 2-3,000 rules, it might add up. Also, i presume that a single whitespace at that position will compress badly compared to the situation where it is removed.

I have long forgotten why I add that odd whitespace. Is it safe to remove? Which browser needed the whitespaces?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

比忠 2024-08-20 14:36:57

您可能添加空格是因为它读起来/看起来更好。

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

现在很少有人手动优化他们的 css，我的建议是让你的 css 可读且可维护，然后使用像 YUI 这样的压缩器/优化器。

http://developer.yahoo.com/yui/compressor/

回复收藏 0 原文

却一份温柔 2024-08-20 14:36:57

互联网连接很快。让你丧命的是延迟，有时是几秒钟，而服务器正在等待你的回复通过网络。实际的文件传输只花费总时间的一小部分。

鉴于一个体面的服务器设置也会发送压缩后的 css 文件，考虑到所涉及的所有其他开销，我真的认为这不会对更大的方案产生太大影响。我会坚持使用看起来最好的东西。

如果 CSS 文件确实达到了您认为这会有所作为的地步 - 正如另一位海报所说 - 缩小是前进的方向。并且不要忘记换行符或制表符占用的空间与空格一样多。

回复收藏 0 原文

我纯我任性 2024-08-20 14:36:57

我实际上更喜欢第三个选项：

class
{
    ...
}

如果您有适用于多个类的样式，我发现它更具可读性，如下所示：

classA,
classB,
classC
{
    ...
}

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

I would actually prefer the third option:

class
{
    ...
}

I find it more readable in the case where you have a style that applies to several classes, like this:

classA,
classB,
classC
{
    ...
}

But of course, in the end it's all about personal preference. Write the code in a way that is easy to read, understand and maintain and use a minifier/compressor to optimize for performance in a production environment.

回复收藏 0 原文

北斗星光 2024-08-20 14:36:57

删除它是非常安全的。如果你缩小了 CSS，它无论如何都会删除它们，缩小 CSS 是一个很好的做法，因为它使用更少的带宽来移动 CSS。

回复收藏 0 原文

感性不性感 2024-08-20 14:36:57

就像大多数编程语言一样，CSS 会跳过任何空格。规则和左大括号之间的额外空格使其更易于阅读。就个人而言，body{ 看起来很丑。

在 CSS 中放置空格的位置取决于您，但它有助于提高可读性。

你想要这个：

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

还是这个？

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

CSS skips any whitespace just like most programming languages. The extra space between the rule and the opening brace makes it easier to read. Personally the body{ looks ugly.

Where you put whitespace is up to you in CSS but it helps to make it readable.

Would you rather this:

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

Or this?

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

回复收藏 0 原文

一指流沙 2024-08-20 14:36:57

有些人为了节省 CSS 空间，会将规则放在一行中。这可以节省更多空间，因为您没有换行符，而且它仍然具有很好的可读性。

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

鉴于大多数网站都缓存了 css，即使 2-3000 行也不会为您节省太多空间，而且性能的提升可能可以忽略不计。

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

Some people to save space with css will put the rules on one line. This saves even more space as you don't have the new line characters and it's still quite readable.

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

Given that css is cached on most websites, even 2-3000 lines is not going to save you much space, and the performance increase will probably be negligible anyway.

EDIT: Changed most people to some people.

回复收藏 0 原文

最偏执的依靠 2024-08-20 14:36:57

如果你不得不担心CSS文件中不必要的空格数量会导致批量下载，那么你可能会在其他地方酝酿其他问题..

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

回复收藏 0 原文

霊感 2024-08-20 14:36:57

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

话虽如此，大多数服务器和浏览器无论如何都会通过网络对网页内容进行 gzip，因此实际节省的空间很小，可能不值得在可读性方面付出代价。

回复收藏 0 原文

美男兮 2024-08-20 14:36:57

body {

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

不要考虑节省几个字节，无论您如何格式化代码，您都应该通过运行它在部署之前先检查 css 压缩实用程序。根据您的开发环境，您也许能够自动执行此任务。

您还应该将 http 服务器配置为对 css 使用 gzip 压缩（这将比 body 和 { 之间的空格节省很多）。

body {

Looks nicer (at least I think so).

Don't think about saving a few bytes, no matter how you format your code you should run it through a css compression utility before deploying it. Depending on your development environment you might be able to automate this task.

You should also configure your http server to use gzip compression for css (which will save a lot more than the whitespace between body and {).

回复收藏 0 原文

看透却不说透 2024-08-20 14:36:57

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

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

只为最后一个“}”字符创建一个新行对我来说似乎很愚蠢。对我来说它仍然具有足够的可读性，但缺点是没有多少 CSS 编辑器尝试自动格式化 CSS 这样做。我通常必须关闭 CSS 自动格式化或手动将其分隔开。

my favorite format is like so:

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

it just seems silly to me to create a new line only for the last '}' char. It still seems readable enough for me, but the downside is that not many CSS editors that try to auto format your CSS do it like that. I usually have to turn off CSS auto formatting or space it out manually.

回复收藏 0 原文