CSS 选择器链性能

Question

我会尝试用一点 CSS 来解释我的问题

选项1

我不会到处重复 float:left;，而是将所有将向左浮动的类名链接在一起。

 .one-little-thing,
 .two-little-things,
 .three-little-things,
 .four-little-things,
 .five-little-things {
    float:left;
}
.one-little-thing {
    color: blue;
}
.two-little-things {
    color: red;
}
.three-little-things {
    color: yellow;
}
.four-little-things {
    color: blue;
}
.five-little-things {
    color: green;
}

字符总数:331(包括空格，但即使你去掉空格，这个例子也是有效的)

选项 2

• 我在哪里重复 float:left;到处都是，但我得到的字符略少。

.one-little-thing {
    color: blue;
    float:left;
}
.two-little-things {
    color: red;
    float:left;
}
.three-little-things {
    color: yellow;
    float:left;
}
.four-little-things {
    color: blue;
    float:left;
}
.five-little-things {
    color: green;
    float:left;
}

字符总数:284

我在这里对两段代码做了完全相同的事情，第二种方式有更少的字符，这意味着更少的字节。

所以我的问题是:
这是否意味着第二种方式的性能更好？如果我有多达九十九个小东西怎么办？

为什么它让我担心
Sass 中的 @extend 允许例如 @extend .clearfix;，如果在“选项 1”中使用，将导致非常非常长的选择器。

那么哪种方法最好呢？

Answer 1

由于字符差异如此之小，此处的性能结果显然不会引人注意。但是，按照第一个代码段中的方式编写 CSS 的好处是，您可以仅在一个地方添加许多其他共享属性，并将它们应用于每个类。随着您添加越来越多的共享属性，您会看到字符差异提示有利于第一种方法。

此外，假设您决定翻译您的网站以支持希伯来语或其他 RTL 语言。您所要做的就是将 float: left 更改为 float: right 在那个位置而不是每个单独的类中。话虽如此，我认为从可用性和长期可扩展性的 Angular 而不是特定实例的纯服务器性能来看待 CSS 很重要。