直接在父（和继承）或子元素上的CSS样式？

Question

一般来说，当我们有一些应该一起设置样式的子元素时，我们应该将该样式放到父级并让继承工作，还是给孩子们自己？例如，如果我们有如下结构：

<div class="foo">
  <p>should be 2em</p>    
  <ul>
    <li>should be 2em</li>
    <li>should be 2em</li>
  </ul>
</div>

然后我应该这样做：

.foo {font-size: 2em;}

或类似的东西？：

.foo p, .foo li {font-size: 2em;}

我认为这个问题非常基本，但很抱歉我找不到任何好的谷歌搜索结果。

Answer 1

这是一个很好的问题。 我相信你应该让级联工作正常 - 这就是css的全部意义（级联样式表）。 如果您更喜欢使用更明确的方法，那么维护css可能会成为一场噩梦。

例如，如果我给我的父div一个bg颜色的黄色，并且在其中嵌套了另外100个div，使用它们的类/ ids，我们不希望明确地给它们background-color：yellow属性一遍又一遍。

所以尽量使用它，因为作者希望它是 - Cascade。

Answer 2

您应该尽可能使用最小深度，这样可以通过最小化“回流”时间和CPU使用率来提高您的网站速度

  

避免使用不必要的复杂CSS选择器 - 尤其是后代选择器 - 这需要更多CPU功率来进行选择器匹配。

src：https://developers.google.com/speed/articles/reflow

以便您的例子 - .foo {font-size: 2em;}更可取。

Answer 3

.foo {font-size：2em;}是正确的