Css性能：使用标记名或类来处理子元素更好吗？

我正在使用scss。我想知道哪种方法在使用标记名寻址子元素或实例化新类之间具有最佳性能，以及哪种方法被认为是最佳实践：

.产品{ &__图像{} &__标题{} } .产品{ img{} h5{} }

---

这完全取决于你的HTML。你真的需要每个元素都有一个类吗

我的主要经验法则是：如果我需要以类似的方式设置多个项目的样式，并且它们在语义或结构上是相关的，那么添加一个类。在这种情况下，您只需使用CSS中的类来针对所有元素

.profile-pictures {max-width: 67%;}

但是，如果元素之间没有任何关联，或者您只针对单个元素，只需使用标记名即可

header h1, figcaption {text-align: center;}

这里重要的部分是语义。HTML5是关于链接网络的。不仅是网页之间的关系，而且是单个网页的清晰结构。在我看来，语义清晰的标记就是其中的一部分。其他开发人员应该能够阅读您的代码，并对其结构和构成有一种感觉，而不必在浏览器中实际看到结果

这也意味着我一点也不喜欢product_uuImage之类的类，因为它是从类和标记派生的。那么它与产品img有何不同呢？撇开特殊性不谈，它并没有——但它确实涉及到很多实际上并不需要的HTML开销。以我的拙见，这些类将HTML膨胀成一个无法阅读的、冗余的混乱

---

总结：在语义上有意义的地方，坚持使用CSS选择器和类名。在语义上或结构上显然是一种选择的情况下，使用类对元素进行分组。不要用每个元素的类来填充HTML。记住2005年的陈词滥调，少即是多。

对于最佳实践方法，我建议使用用BEM组织的类，以使样式不依赖于标记。假设选择器是从右向左求值的，简单的类选择器似乎更有效。产品img首先匹配每个img，然后css引擎必须遍历DOM树的根，以检查是否有任何父级具有类product。但这是从理论上讲的。每个引擎可能会实现各种优化。