直接在父（和继承）或子元素上的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嵌套在它的class/id中，我们不想明确地给它们指定背景颜色：yellow财产一遍又一遍。

因此，尽量使用它作为作者希望它 - Cascade。

Answer 2

你应该使用最小深度在可能情况下，这会使您的网站通过最小化“回流”的时间和CPU使用率

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

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

，以便您的例子 - .foo {font-size: 2em;}是优选的。

Answer 3

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