在[class*=“定制风格-”)和“.这个类是默认类型”之间，还有什么更昂贵的？

Question

我有一些类似的样式，每个样式大约有6-7行相同的代码，如下所示：

custom-style-1 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}

custom-style-2 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}

custom-style-3 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}
..
..

因此，我编写了这篇文章，并从每个类中删除了重复属性：

[class*="custom-style-"],
[class*="custom-style-"] {
    font-size: 12px;
    color: red;
}

但后来又想，为什么不写另一门课呢：

.this-class-is-default-style {
    font-size: 12px;
    color: red;
}

并将其添加到html中的<div class="{list-here}">中。

哪一个在渲染时间上比较贵？此外，使用方法是否有任何灵活性问题或缺点，而不是唯一的方法？

Answer 1

第二种方法(使用没有class*=...的特定类)可能更好，因为浏览器不需要对所有类属性执行包含搜索(但在大多数情况下性能增益应该是微不足道的)。浏览器被优化以找到一个css类作为它的正常情况。

但是第二种方法更重要的是，更多的安全，因为将不想要的类应用于元素的可能性会更低。如果custom-style-的名称不是非常特殊和唯一的，那么它可能类似于您的css文件中的许多其他类名，这可能会在将来导致一些错误。

即使您选择了第一种方法，我也建议您使用BoltClock：[class^="custom-style-"], [class*=" custom-style-"] {...}指定的BoltClock：[class^="custom-style-"], [class*=" custom-style-"] {...}来减少重叠的可能性，并且考虑到类名可以位于列表的开头或中间。