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

• 我在哪里重复浮动：左;到处都是，但我的角色略少。

.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：右边的那一个而不是每个单独的类。话虽如此，我认为从可用性和长期可伸缩性角度看CSS而不是特定实例的纯服务器性能非常重要。