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 /更少像

更好

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

然后在我的html中我会有

这样选择器会更快但是comiled css会因重复而变得越来越臃肿。

拥有更大但性能更高的css或更小的css文件以及更多更重且更臃肿的类html文件更好吗？

Answer 1

TL;DR：见Premature Optimization。

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

.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（因此服务器可以提供静态文件）。

为多个类或一个CSS规则设置元素的样式是否更好？

1 个答案: