[class * =“custom-style-”]和“.this-class-is-default-style”之间更贵吗？

我有几分相似的风格，每个都有约6-7行代码是一样的，就像这样：[class * =“custom-style-”]和“.this-class-is-default-style”之间更贵吗？

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; 
}

，只是将它添加到<div class="{list-here}">在HTML中。

哪一个在渲染时间方面更昂贵？另外，使用方法是否存在灵活性问题或缺点，而不是唯一的方法？

来源

2017-10-15 Daniel Moss

_“哪一个在渲染时间方面更昂贵？” - 只有一些带有小卡钳和测量设备的怪胎才会知道...对于其他人来说，这将不重要:) – CBroe

@CBroe I'我非常努力地优化eveything，尽我所能从一开始就学会以某种方式编写代码，JS也是，所以我感兴趣:)也许有人知道答案。 –

你的实现也不完全正确。你有两次'[class * ='custom-style - “]''。其中一个应该是'[class^='custom-style - “]'而另一个应该是'[class * ='custom-style - ”]''。请参阅https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix/8588532#8588532 – BoltClock

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

但第二种方式更重要的是更多安全，因为将不需要的class'es应用到元素的机会会更低。如果custom-style-的名字不是非常特殊和独特的，它可能类似于您的css文件中的许多其他类名，这可能会在将来导致一些错误。

即使您选择第一种方法，我建议您使用BoltClock指定的the method：[class^="custom-style-"], [class*=" custom-style-"] {...}以尽可能减少重叠的机会，并考虑类名可以在列表的开头或中间。

来源

2017-10-15 06:39:07

Re：最后一段，因为我现在已经指出了实现是不正确的。除了最极端的边缘情况之外，我链接的正确实施对所有人都是健壮的。 – BoltClock

@BoltClock谢谢，编辑为您的评论 –

[class * =“custom-style-”]和“.this-class-is-default-style”之间更贵吗？

回答

相关问题