css - CSS 选择器链性能

Question

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

选项1

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

.一件小事，
 .两件小事，
 .三件小事，
 .四件小事，
 .五件小事{
    向左飘浮;
}
.一件小事{
    颜色：蓝色；
}
.两件小事{
    红色;
}
.三件小事{
    颜色：黄色；
}
.四件小事{
    颜色：蓝色；
}
.五件小事{
    颜色：绿色；
}

字符总数：331（包括空格，但即使您修剪空格，该示例也是有效的）

.一件小事{
    颜色：蓝色；
    向左飘浮;
}
.两件小事{
    红色;
    向左飘浮;
}
.三件小事{
    颜色：黄色；
    向左飘浮;
}
.四件小事{
    颜色：蓝色；
    向左飘浮;
}
.五件小事{
    颜色：绿色；
    向左飘浮;
}

字符总数：284

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

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

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

那么哪个是最好的方法？

score 2 · Accepted Answer

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

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