高效CSS寫法

上周末翻譯了molliza 和google關於高效CSS 的寫法的文章，覺得他們的說法有一些共同之處，就是CSS解析引擎是從右至左開始解析的，我們要做的就是減少CSS

引擎的解析時間，所以避免一些低效的CSS 選取器去匹配大量元素能夠減少頁面載入的時間。結合我自己編寫CSS的經驗，我總結如下：

1) CSS 的層級選取器不要超過3個，保持3個以內

bad case： .class1 ul li a{}

good case .class a{}

2) 盡量少使用標籤選取器，但是也是可以使用的，比如寫列表（ul li文法）的時候，如果給每個li一個class，那樣相反不僅代碼難看，而且也無疑的增加了代碼

複雜度，很難維護，總之，在於自己權衡這個點就是了。

3) 使用一些有代表意義的單詞，比如我在模組化開發的過程中，我一般用mod-xxx,在這裡模組中我寫的CSS都在這個裡麵包含，很利於維護，代碼也很漂亮，

不會超過3層的內含項目關聯性。也不用過多的考慮同名的問題。

4)不要早id前面添加任何限定符，包括class tag 或者其他的選擇符。

bad case： .class #id{}   div#id{}這2個都是不推薦的

good case： #id{}推薦的做的

5)不要再class 前面使用標籤限定符，除非你是想給不同的標籤定義多個class ，那麼只有這樣用了。

bad case: div.class{}

good case :.class{} 

   另外： div.class{} span.class{} 這樣那就這樣吧。。

6) 使用class 來代替層級關係，如果發現要寫很多的層級關係才能表達意義的時候，那麼放棄吧。乾脆寫一個class 來替代這個解決方案。例如

bad case: #id .class1 ul li a{}

good case .class2{} 

將這個class2直接加在a標籤上。

請各位大俠拍磚。謝謝。