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指定的the method：[class^="custom-style-"], [class*=" custom-style-"] {...}以最大限度地减少重叠的可能性，并考虑类名可以位于开头或中间位置。列表。

在[class * =＆＃34; custom-style - ＆＃34;]和＆＃34; .this-class-is-default-style＆＃34;之间更加昂贵？

1 个答案: