[类*= "custom-style-"]和".this-class-is-default-style"之间哪个更贵？

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-"] {...}尽量减少重叠的机会，并考虑到类名可以位于列表的开头或中间。