我们应该使用CSS子选择器还是基于CSS类的选择器？

Question

在性能和优化方面，下面的HTML代码中选择子div的更好的方法是哪种？

选项1：

<div class="parent-div">
  <div></div> <!--- child DIV !--->
</div>

// CSS

.parent-div > div {
  // Some CSS for child div
}

'

选项2：（使用className / id选择）

<div class="parent-div">
   <div class="child-div"></div>
</div>

// CSS

 .child-div {
    // Some CSS for child div
 }

Answer 1

方法2的代码可维护性更好。

我建议阅读the BEM naming convention guide。

<div class="block">
   <div class="block__elem"></div>
</div>

Answer 2

这取决于，如果孩子是自己的“组成部分”，我会给它一个类。但是如果它只是某些父组件的一部分，我将使用.class > element选项。

我的观点是基于Angular及其在组件级别分离的CSS。这样做的好处是，您将不会得到大量的文件。