直接在父（和繼承）或子元素上的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;}是正確的