在css规则之间放置分号时,将忽略分号后面的规则。这可能导致一些非常奇怪的结果。MDN有一个小提琴,可以用来显示这一效果相当清楚。
幸运的是,它本质上是来自于一个人的css块之间的排除分号的普遍做法。
我的问题是:为什么会这样?我听说是这样的,因为它将节省空间(在本例中,每个css规则正好有一个字符)。但这种推理,虽然是真的,但似乎有点奇怪。我找不到css文件中每个字符占用多少空间的详细信息,但是如果它类似于JS,这是如此的帖子告诉我们每个字符大约是16位,或2个字节。这意味着我们将每条规则保存2个字节。
根据按国家分列的平均连接速度列表的数据,全球平均连接速度为5.1兆比特/秒。由于我们通过不允许分号来精确地保存每条规则的一个字符,而且每个字符是16位,我们可以显示,平均而言,节省一秒所需的规则量是:
5,100,000(bits/second) / 16(bits{saved}/rule)
(5,100,000/16)*[(bits * rule)/(second * bits] or
318750 (rule/second)
因此,根据全球平均连接速度,需要超过30万条规则才能节省我们一秒钟的时间。
当然,必须有更有效的方法来为用户节省下载时间,而css/js的小型化/丑化就是其中之一。或者缩短CSS属性名称的长度,因为它们比一个字符长得多,而且可以多次出现,缩短这些字符比剪掉尾随分号节省更多的字节。
在我看来,比保存的字节更重要的是,这会给开发人员带来多大的混乱。我们中的许多人都习惯于用分号跟随封闭的大括号。
returnType/functionDec functionName(arguments){
//...function body
};
是许多语言(包括JavaScript)中非常常见的模式,完全可以想象开发人员键入
cssRuleA{
/*style Rules */
};
cssRuleB{
/* Style Rules*/
};
这是这种习惯的偶然结果。控制台将不会记录错误,开发人员将没有迹象表明在样式之外发生了错误,没有正确显示。最糟糕的是,即使cssRuleA是导致错误的原因,它也会运行得很好,即使没有什么问题,cssRuleB也是没有正确显示的规则。事实是
特别是在大型项目中,样式/UI问题可能有许多不同的根源。
CSS中是否存在一些内在因素,使这个约定更有意义?我错过了一些白皮书,解释了为什么CSS是这样的吗?就我个人而言,我试图从有限自动机/文法的角度看排除分号是否更快,但我无法确定它是否更快。
发布于 2017-03-08 09:46:52
在CSS中,规则由任何一个块或语句定义,但不是同时定义的。块是由一对大括号包围的代码块。语句是以分号结尾的代码块。
空的“规则”不是有效的CSS规则,因为它不能被解析为限定规则或在先。因此,两个块之间的一个单独的;
是无效的,同样的原因是,一个不包含前奏的块(一个选择器列表,或者一个at-关键字,后面跟着一个可选的前奏)是无效的:因为它不能被解析成任何有意义的东西。
只有at-规则可以采用语句的形式,因此可以用分号来结束(例如@charset
和@import
);限定的规则永远不会出现。因此,当遇到格式错误的规则时,如果解析器尚未解析at-规则,则将其视为限定规则,直到并包含下一组大括号的所有内容都将被消耗和丢弃,包括分号。这在css第2.2节-语法-3中被简洁地描述了(它说文本是非规范性的,但这只是因为规范规则是在语法本身中定义的)。
在CSS中采用如此急切的方法的原因主要是由于选择器错误处理 --如果它是保守的,浏览器可能会不经意地将下面的规则解析为完全出乎意料的东西。例如,如果IE6不理解>
,只忽略p > span {...}
中的p >
,并认为以span
开头的所有内容都是有效的,那么规则最终将匹配IE6中的任何span
元素,而只匹配支持浏览器的元素的适当子集。(实际上,IE6中也存在类似的问题,链式类选择器 - .foo.bar
被视为.bar
。)因此,您可以认为这不是自由的错误处理,而是CSS规则的保守应用。当有疑问时,最好不要应用规则,而不要用意想不到的结果来应用它。
不管是谁告诉你这是因为表演原因,都是在编造。
https://stackoverflow.com/questions/42676805
复制相似问题