为什么 CSS 在规则中使用冒号“:”？答案

【问题标题】：Why does CSS use colons ":" in rules?为什么 CSS 在规则中使用冒号“:”？
【发布时间】：2011-03-03 11:17:59
【问题描述】：

CSS 属性不使用空格，为什么不将规则中的第一个空格用作属性和值之间的分隔符？

这是一个例子：

【问题讨论】：

你为什么不认为第二种解决方案是“更清洁”？我更喜欢第一个，它更容易阅读，你不觉得吗？
我猜这与大多数其他脚本语言使用的通用 "key":"value" 语法有关 ;-) 为什么要更改一些效果很好的东西呢？
第二个肯定不干净。
我明白为什么人们不同意，但这个问题真的应该被否决吗？它不是不清楚或无用的，即使它有点令人讨厌，它是一个有效的问题，对吧？
同样可以说在大多数语言中您不需要赋值运算符。而不是 "foo = 123, fum = 456" 你可以写成 "foo 123, fum 456"！

标签： css syntax language-design

【解决方案1】：

不确定是否可以给出比“可能避免混淆”更好的答案。

编程和标记语言中的许多元素并不是 100% 有利于提高可读性。我个人觉得

background: red 1px url(images/test.jpg)

比

清晰很多

background red 1px url(images/test.jpg);

【讨论】：

就像 StackOverflow 一样，它在第一个示例中添加了语法突出显示，而不是第二个示例 ;-)
@Alex：实际上，这正是 CSS 规范团队决定使用 : 的真正原因。赞美他们的预知能力！

【解决方案2】：

意外的空格比丢失的冒号更容易输入，也更难发现。

【讨论】：

如果您有语法高亮显示，则不会。没有冒号会使 CSS 文件更轻、更快。
@Emanuil：如果你有一个不错的带有语法高亮的代码编辑器，那么冒号也应该没问题。写一个扩展来自动插入它们，如果它打扰你这么多。
@Emanuil：即使有语法高亮显示，仍然比丢失冒号更难发现丢失的空格。没有空间不会使 CSS 文件“更轻”，因为每个属性只删除一个完整的字符 - 即使使用大量样式表，您仍然在谈论微不足道的改进。与冒号+空格相比，按空格的速度也可以忽略不计。 Look at this。我的眼睛盯着冒号看每个属性的价值，而对于空格，还有其他不相关的空格让我感到困惑。
@thirtydot，属性为蓝色，值为红色。区分它们有多难？我知道新语法在空间和编写速度方面的改进并不大，但我不会说它们可以忽略不计。
@Emanuil: "Negligible refers to the quantities so small that they can be ignored (neglected) when studying the larger effect." - 我会说改进绝对可以忽略不计，而缺点是（对于迄今为止在此问题中发布的每个人）有害的.

【解决方案3】：

为什么不把花括号也去掉，让缩进决定结构呢？那会更干净。

然而，有时更好的语法并不是要删除所有你能想象到的东西，你通常需要保留一些东西来保持语法清晰。与更清晰、更隐含的语法相比，更清晰的语法以更好的方式表达意图。使用显式语法更难出错，也更容易发现这些错误。

在你的两个例子中，我发现第一个更容易理解，因为键和值被明确、明确地分开。

【讨论】：

就个人而言，我更喜欢没有花括号的语法。不过我明白你的意思。
原来的分隔符不是空格吗？我的意思是空格字符存在的唯一原因是分隔其他字符。可读性很容易通过适当的语法突出显示来修复，“无冒号”的好处是巨大的——文件更轻，更容易编写。
实际上，大括号（和分号，并且没有单行 cmets (//)）都被添加到标准中，以便能够完全去除所有空格以减小文件大小。因此，CSS 很容易缩小。这也可能是为什么有一个分号，以使软件更容易阅读。
克苏鲁完全正确。去除空白是 CSS 文件的常见大小优化。如果不是它们的大小，我不确定您所说的“较轻的文件”是什么意思，并且分号绝对不会为文件增加比您通过删除所有空格可以删除的更大的大小。如果您正在寻找一种完全基于空格的语言，那么，we have just the thing for you。非常轻盈和“通风”。
除了在css中你不能只去掉冒号和分号之间的空格，因为CSS属性可以组合。 font: bold 12px/16px Arial, Verdana, sans-serif; 有两个空格不能去掉。

【解决方案4】：

它更易于使用，更具语义性，并且如果他们在以后遇到规则，它是未来的证明。它还使调试更容易。

这只是可用性高于效率的一个例子。

【讨论】：

【解决方案5】：

正如其他人所说，需要给出一个清晰的语法，它足够灵活以选择你的风格（一行写规则？每行写一个键：值？等等）。

让我举个例子。你可以这样写：

a {
  border: 1px
  solid black;
}

如果你省略了所有的语法字符，这将变成：

a {
  border 1px
  solid black
}

这是模棱两可的，或者从另一个角度来看，语法太死板了。

【讨论】：

@vbence: 我没说这很好:)。
如果分号是强制性的，就不会模棱两可了，就像在 C 中一样（我总是把它们放在一边）。但无论如何都是好论据。

【解决方案6】：

我敢打赌，大多数 CSS 解析器都有一些用 C 或 C++ 编写的历史，以及用于解析文件的 strtok 函数，以及解析 C/C++ 文件的类似规则。

其他人已经提到使用空白分隔符的歧义。

;是 C 和 CSS 语法的另一个重要部分

【讨论】：

【解决方案7】：

许多语言都使用variableName: type 表示法（变量、参数等的声明）。我看到一个使用variableName type（可能是Go），我被这个样子打扰了。即便是毫不含糊，也“感觉不对劲”，或许是因为习惯，或许是因为缺少“节奏”。英语句子中的标点符号并不总是必要的（有时为了避免歧义），但缺少它会让读者感到不舒服。眼睛需要找到标记。
F#（及其父语言）的同上，只是省略了函数参数的括号和逗号。看起来很奇怪（但也许有人会沉迷于这种符号）。

与往常一样，需要在注释过多和注释过少之间取得平衡。在创新和打破习惯之间……创新很好，但必须有目的。以可读性为代价节省一些击键很少是目的。 :-)

【讨论】：