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

还有什么比这更有效

假设我想将这种样式添加到页面的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;
}

然后将其放入页面上的每个元素中，如

或者，如果我使用它来扩展每个元素，使用sass/less-like是否更好

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

然后在我的html中，我会

这样，选择器会更快，但滑稽的css会因为重复而变得越来越臃肿

是使用更大但性能更高的css文件更好，还是使用更小的css文件和更重、更臃肿的html文件更好？

：请参阅

使用单个类更有效。因此，最快的解决方案是：

.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一次（这样服务器就可以提供静态文件）。

您正在寻找.myelement1、.myelement2、.myelement3{color:red}像这样的选择器？只要有意义就使用类：如果你的

.myelements

中有一些无法选择，那么两个类就完全可以了。与其担心计算机的性能--它可以管理得很好，谢谢--你应该担心自己的性能，就您和您之后的人编写、调试、理解、维护和扩展代码的效率而言。从这个意义上讲，将不可选择的行为隔离到

no select

类中显然更优越。两者都要使用！不，真的。如果一个项目中有100个元素，可能很难找到所有元素，并且很难将它们粘贴到每个类中（或者甚至为大多数类编写

class=”“

属性），而在

上方添加一行
#foo、#bar、.baz、
则更容易。无需选择{

。另一方面，当你习惯了所有的助手类之后，总有一天你会发现自己在使用自己的CSS集合，使用一堆类似于

.clearfix

的类（比如Bootstrap fellas），同时创建你的HTML标记，甚至不需要思考。（只是一个意见，没有不好的感觉：））我认为在您的示例中，

“myElement”

在

内部。myElement no select

对帮助器类来说只是噪音，因此没有抓住要点。所以是的，

。no select

就是这样。以后在项目中或任何时候都可以重用。帮助器类应该保持干净。我们可以做的是链接，只在该帮助器类上方一行>其他类或ID（ofc.始终关注特殊性。）问题解决了。现在，要将该类链接或直接添加到HTML中吗？我们将让感官来决定。