时间戳

首页 > 解决方案 > Css 性能：更好地处理带有标签名称或类的子元素？

css - Css 性能：更好地处理带有标签名称或类的子元素？

问题描述

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

.product{
  &__image{}
  &__header{}
}

.product{
  img{}
  h5{}
}
<div class="product">
         <img class="product__image" src="" alt="">
         <h5 class="product__header"> </h5>
  </div>

标签： cssperformancesass

解决方案

这完全取决于您的 HTML。你真的需要为每个元素创建一个类吗？

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

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

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

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

这里的重要部分是语义。HTML5 是关于链接网络的全部内容。不仅是网页之间的关系，还有单个网页的清晰结构。在我看来，语义清晰的标签是其中的一部分。其他开发人员应该能够阅读您的代码并了解结构和构成，而无需在浏览器中实际看到结果。

这也意味着我根本不喜欢诸如 之类的类product__image，因为它派生自一个类和一个标签。那么它与 有何不同.product img？撇开特殊性不谈，它不会——但它确实涉及很多您实际上不需要的开销 HTML。以我的拙见，这类类会使您的 HTML 变得难以阅读、冗余混乱。

总结一下：坚持在语义上有意义的 CSS 选择器和类名。用类对元素进行分组，在语义上或结构上这是一个明显的选择。不要用每个元素的类来膨胀你的 HTML。记住 2005 年的陈词滥调，少即是多。

推荐阅读