使用多个类还是使用一个 CSS 规则设置元素样式更好

Question

什么能比这更高性能？

假设我想将此样式添加到页面的 10-15 个元素中

-webkit-touch-callout: none; 
-khtml-user-select: none; 
user-select:none;

把它放在一个类中更好吗

.no-select {
    -webkit-touch-callout: none; 
    -khtml-user-select: none; 
    user-select:none;
}

然后将其放入页面上的每个元素中，例如<div class="myElement no-select"></div>

或者如果我用它来扩展每个元素会更好 sass/less like

.myElement{
    background-color:green;
    @extend .no-select;
}

然后在我的 HTML 中，我只会有

这样选择器会更快，但编译的 css 会越来越臃肿。

拥有更大但性能更高的 css 更好，还是更小的 css 文件，并且使用大量类 html 文件更重、更臃肿？

Answer 1

TL;DR：请参阅过早优化。

使用单个类的性能更高。所以最快的解决方案是：

.myElement{
    background-color:green;
}
.myElement-no-select {
    background-color:green;
    -webkit-touch-callout: none; 
    -khtml-user-select: none; 
    user-select:none;
}

并将myElement或myElement-no-select分配给 DOM 节点，具体取决于您是否需要no-select样式。

也就是说，除非你有成千上万的元素，否则你不会注意到任何差异。最重要的是，如果您需要切换no-select样式，那么以这种方式压缩CSS会使JavaScript更难维护。

如果您在页面加载时用 JavaScript 进行 SASS 编译，此步骤可能会比您通过它获得的更昂贵。要真正将性能带回家，您需要在部署或打包期间编译一次 CSS（以便服务器可以提供静态文件）。