網易郵箱的CSS開發（一）

來源：網易郵箱的部落格

網易郵箱是個龐大而且細節繁多的系統，註定了前端開發中樣式管理的複雜程度非常高。如果沒有一個合理的體系來管理樣式，開發和維護的難度是不可想象的。從極速3.5版本開始，我們就一直遵循並不斷改善這套規則，現在就來分享一下~

開發思想

在錯綜複雜的樣式面前，CSS顯得過於簡陋。於是我們不得不人為的加上一些思維方式和規則來幫助我們管理樣式。

我們借鑑了“物件導向”中的“封裝”和“繼承”來開發CSS，使我們能很大程度上重用CSS程式碼的同時又不至於在修改CSS程式碼時因為過度重用而難以下手。

每個頁面都由很多元素（除非特別指出，本文的“元素”都不是指這樣的HTML元素）組成，元素可以大到整個介面框架，也可以小到一個圖示。元素相互巢狀、組合，形成了最終的頁面。

對於任意元素，我們建立這樣一種模型：

1、所有的元素內部都可以巢狀其他元素；

如：“a”裡可以巢狀“a的頭”、“b”等。

2、元素內部的元素中，有的是“私有的”，只能在這個元素內使用，其樣式也不會受父元素之外的CSS規則影響，有的是“公有的”，可以出現在任何位置；

如：“a的頭”、“a的身體”是“a”的私有元素，“a的身體的某部分”是“a的身體”的私有元素，而“b”是公有元素，被“a”呼叫，“a”可以修改其內部的“b”的樣式，但不能修改其他“b”的樣式。

3、元素根據需要可以具備多種狀態，可以給這個元素一個“引數”讓它呈現不同狀態；

如：設一個hasBorder=“true”可以讓“a”有邊框，設一個size=“big”可以讓”a的身體的某部分”變大

4、可以從一類元素派生出另一類元素

如：我們需要和“a”類似的元素，但是需要對其進行擴充套件，這時我們新建一類“a2”元素，“a2”繼承了“a”的所有樣式和“私有元素”和“引數”

開發時，元素就像“類”一樣被定義在CSS中，元素的“私有元素”、“引數”等也都定義在這個“類”中。

CSS類定義：

命名和編碼規則

以上所說的模型並不是CSS與生俱來的，所以需要一些命名和編碼規則來加以實現，不過這個並不複雜。

1、我們使用連字元“-”從邏輯上劃分class名，使用駝峰式命名區分單詞；

如：.a-b-helloWorld

2、有時我們會給class加上一個名稱空間字首，名稱空間與class之間也用連字元“-”連線；

如：.WB3-a-b-helloWorld，在極速4中，WB3名稱空間下的class名將被壓縮成1~3個字母短名稱。（注：WB3是網易郵箱前端吊絲們給極速4起的開發代號……三樓水吧WaterBar3，碉堡了-。-……）

3、“私有元素”必須以父元素的class名作為字首；

如：“a的身體的某部分”的名稱是j，而它的父元素“a的身體”的名稱是bd，“a”的名稱是a，那麼最後連起來的class就是.a-bd-j。

 

4、“引數”依然使用class實現，以能表達“是否”或具體取值的方式命名：

如：.hasIcon表達有圖示，.hasBorder表達有邊框，.sizeBig表達大尺寸的，.sizeSmall表達小尺寸的

***這裡是一個理想狀態（無IE6）下的命名方案，假設元素a提供以上狀態，我們可以這樣實現：

為了IE6，我們不得不用這樣的命名來相容：

5、從一類派生出另一類元素，命名上沒有特別的要求，通過在HTML中的class同時寫上基類和子類的class來實現；

 

 

 

by Sunji