先思考選擇器、層級有哪些特性

1. 一般來說選擇器的層級不能過深，據說過深在解析渲染時會有性能問題

2. 層級會限制作用域，類似於PHP中的命名空間的概念

3. 層級會影響優先級的計算（多一層權值就會多一點）

而我們面臨的棘手問題：

1. 命名

2. 作用域

1：我們總是苦苦思索合適的命名，同時不得不擔心會與已有的名稱發生衝突。

2：我們也討厭很深的層級，倒是希望所有的都是一層才好，但是這樣有兩個缺點，一是不容易區分模塊，二是我們常習慣於使用層級作用域來避免樣式衝突的問題。

所以，我們喜歡使用層級，然後再起一個合適的名字。

但是這個層級到底幾層才最合適呢？

小明爺爺 > 小明爸爸 > 小明 {}

顯然層級很大程度上是由結構關係決定的，但是說能保證實際結構都很淺呢？

小明太太爺爺 > 小明太爺爺 > 小明曾爺爺 > 小明爺爺 > 小明爸爸 > 小明

(完整的html結構關係，實際項目中可能會更復雜)

雖然我們開發時可以儘量去避免，但是得承認這很難完全的避免。

那這個時候怎麼辦呢？

再回想一遍我們的棘手問題，命名似乎不是問題了，那麼就剩一個作用域了。

我們要定位這裡小明（局部而非全局的小明），其實只需要兩層就可以了：

小明太太爺爺 > 小明 {} 

小明太太爺爺 就是給 小明 充當父級，限制作用域的。

這樣我們的目的也達到了，層級不會那麼臃腫冗長了。

而如果不是為了解決衝突，或者說沒有衝突要解決的話，那就無需父級來限制作用域，直接一級就可以了：

小明 {}

這樣最簡潔直觀。css不同於html，它有自己的運行方式，它不需要那麼死板循規蹈矩的套結構，沒必要寫完整的結構。所以不要有思維定性，寫css時應該站在css的角度，去考慮css的特性。

分析完。

補充：儘量少用過深的層級，Google的網站就很簡潔，基本上所有元素都是一層，哪怕把類名寫長一點，不要為了顯示元素的身份（元素的上下文）而故意加上層級關係，不要覺得這樣看起來直觀一些，這樣的層級結構只是人看起來比較直觀而已，對計算機來說，沒有任何意義。很多時候，人賦予代碼的意義，對計算機來說，並不感冒。

另外，避免層級關係可以很方便的實現組合，這也符合了“少用繼承，多用組合”的原則。

好的 CSS 命名規範可以節約 Debug 時間

如果定義頭上的頭髮，手上的指甲該怎麼定義，屬於元素嗎？

閱讀更多 右手詩 的文章

關鍵字: Google 過深 技術