css - 有没有解释为什么我们不能在 CSS 声明 block 之间放置分号？

Question

当您在 css 规则之间放置分号时，分号后面的规则将被忽略。这可能会导致一些 very strange results . MDN 有一个 jsfiddle 可以用来相当清楚地展示这种效果。

This是初始状态，this在第一条规则的末尾有一个分号之后。

幸运的是，它本质上是 universal practice to exclude semicolons从一个人的CSS block 之间。

我的问题是:为什么会这样？我听说是这种情况，因为它会节省空间(在这种情况下，每个 css 规则恰好一个字符)。但这个推理虽然正确，但似乎有点奇怪。我找不到关于 css 文件中每个字符占用多少空间的具体信息，但如果它类似于 JS，this SO post告诉我们每个字符大约有 16 位，或 2 个字节。这意味着我们将为每个规则节省 2 个字节。

根据 this list of average connection speed by country全局平均连接速度为 5.1 兆比特/秒。由于我们通过不允许分号来为每个规则保存 1 个字符，并且每个字符为 16 位，因此我们可以证明，平均而言，我们保存一秒钟所需的规则数量为:

5,100,000(bits/second) / 16(bits{saved}/rule) 

(5,100,000/16)*[(bits * rule)/(second * bits] or

318750 (rule/second)

因此根据全局平均连接速度，需要超过 300,000 条规则才能为我们节省一秒钟的时间。

肯定存在更有效的方法来为用户节省下载时间，例如 css/js 的缩小/丑化。或者减少 CSS 属性名称的长度，因为它们比 1 个字符长得多并且可以出现多次，与砍掉尾随分号相比，缩短这些名称可以节省更多字节的数量级。

在我看来，比节省的字节数更重要的是，这会给开发人员带来多大的困惑。我们中的许多人都习惯于在大括号后加分号。

returnType/functionDec functionName(arguments){
 //...function body
};

是一种在许多语言(包括 JavaScript)中都非常常见的模式，并且绝对可以想象开发人员键入

cssRuleA{ 
 /*style Rules */
};
cssRuleB{
 /* Style Rules*/
};

作为这种习惯的偶然结果。控制台将不会记录任何错误，开发人员不会有迹象表明在样式未正确显示之外发生了错误。这绝对最糟糕的部分是，即使 cssRuleA 是导致错误的原因，它也能正常工作，cssRuleB 将是无法正确显示的规则，即使它没有任何问题。事实是

1. 这不会在控制台中记录错误，并且
2. 在这种情况下，未显示的样式绝不是错误的样式

在样式/UI 问题可能有许多不同的可能根源的大型元素中尤其会引起问题。

CSS 中是否存在某些固有因素使该约定更有意义？在我遗漏的一些白皮书中是否有什么解释了为什么 CSS 的行为方式？个人尝试从Finite Automata/Grammars的 Angular 看排除分号会不会更快，但我无法确定它是否更快。

Answer 1

在 CSS 中，规则由 block 或语句定义，但不能同时由两者定义。 block 是被一对花括号包围的代码块。语句是一段以分号结尾的代码。

空的“规则”不是有效的 CSS 规则，因为它不能被解析为 qualified rule或 at-rule .因此，两个 block 之间单独的 ; 是无效的，原因与不包含前奏的 block (选择器列表或 at 关键字后跟)的原因相同一个可选的序曲)是无效的:因为它不能被解析成任何有意义的东西。

只有 at 规则可以采用语句的形式，因此以分号结束(示例包括 @charset 和 @import)；合格的规则永远不会做。因此，当遇到格式错误的规则时，如果解析器尚未解析 at 规则，则将其视为合格规则，并且一切直到并包括下一个匹配的花括号集消耗和丢弃，包括分号。这在 section 2.2 of css-syntax-3 中有简要描述。 (它说文本是非规范的，但这只是因为规范规则是在语法本身中定义的)。

错误处理在 CSS 中采用如此急切的方法的原因主要是由于 selector error handling — 如果它是保守的，浏览器可能会无意中将以下规则解析为完全出乎意料的东西。例如，如果不理解 > 的 IE6 只忽略 p > span {...} 中的 p >并将所有以 span 开头的内容视为有效，该规则将最终匹配 IE6 中的 any span 元素，同时仅匹配适当的元素子集在支持浏览器。 (事实上​​，IE6 中确实存在一个类似的问题 chained class selectors — .foo.bar 被视为 .bar。)你可以因此，不要认为这是自由的错误处理，而是 CSS 规则的保守应用。最好不要在有疑问时应用规则，而不是应用它会产生意想不到的结果。

无论谁告诉您这是出于性能原因，这都是编造的。