CSS開發規範

摘要：

　　轉載：http://www.cnblogs.com/xiyangbaixue/p/3962038.html

不管多少人開發一個項目，規範是最初始也是最基本的，一個好的規範不只讓代碼看起來完美也可以解決衝突。下面是我在開發時使用的css規範

基本規範：

1. 全部名稱小寫，符合w3c規範
2. 類名和id，多個變量之間用中劃線鏈接
3. 全部變量只能使用名詞
4. 變量定義要符合語義化

基本原則：

1. 以項目名或者一個全局名稱爲命名空間，例如你的項目名叫demo，則命名空間爲demo，這樣在多人合做開發時，高度統一如一人編寫。
2. 關注分離，將 HTML、CSS 解耦；模塊化編碼。

模塊化編寫實踐：

1. 語義化的模塊名
   
   經過模塊名應該能一眼就看出模塊的是幹什麼的。通常模塊名錶明着這個模塊的功能，如看到shopping就知道這個模塊是購物的
   
   
2. 模塊內部的類名繼承自父級
   
   如：

   1 <div class="demo-shopping">
   2    <h2 class="demo-shopping-title">title</h2>
   3    <p class="demo-shopping-body">hello world!</p>
   4 ​</div>

    上面的代碼中，模塊的名爲 shopping，模塊最外層使用 {命名空間}-{模塊名} 的方式命名 Class。模塊子元素以在此基礎上進行命名。若是不繼承父級的類名，很容易形成命名衝突。

3. 充分考慮結構的語義化
   
   　　  雖然在 Class 的命名上已經作到的了關注分離，編寫樣式再也不依賴具體的元素名稱，但仍應該考慮語義化，根據元素設計的目的來使用元素。是段落的，你就用 <p>；是標題的，就用 <h1>~<h6>；是引用的，就用 <blockquote>， 而不是簡單粗暴的用 <div>、<span>。語義化的目的，一方面是抽去 CSS 之後，頁面仍是一個結構良好、可讀的頁面；另外一方面，這也是 SEO 的最基本要求。
4. 避免沒必要要的 CSS 選擇符嵌套
   
           Class 已經模塊化命名，從類名上已經能夠清晰的分辨元素的從屬，通常狀況下也不會形成類名衝突，沒有必要再進行選擇器嵌套，保持 css 結構清晰，提升渲染效率。特殊狀況能夠嵌套（如提升權重、主題之間代碼隔離），但應避免過多層級。
   
   1 /* 推薦寫法 */
   2 .demo-shopping {
   3     
   4 }
   5 .demo-shopping-body {
   6 
   7 }
   8 /* 不推薦寫法 */
   9 .demo-shopping .demo-shopping-body {}
   
   
5. 與 JS 交互時，在模塊 HTML 結構的最外一層添加狀態，而非給模塊每一個子元素單獨添加元素
   
   給最外層添加狀態類之後，整個模塊的樣式都能控制，減小操做，提升性能，好比，咱們能夠這樣寫：
   

   1 <div class="demo-shopping demo-shopping-active">
   2    <h3 class="demo-shopping-title"></h3>    
   3    <p class="demo-shopping-content"></p><
   4 /div>

    

   但不要這樣寫（效率更低）：
   

   1 <div class="demo-box">
   2    <h3 class="demo-shopping-title demo-shopping-title-active"></h3>
   3    <p class="demo-shopping-content demo-shopping-content-active"></p>
   4 </div>

   
   
   

命名注意事項：

1. 語義化，望文見義
   如 demo-tab、demo-nav，不要使用 red、left 等表象的詞命名。
2. 模塊狀態： {命名空間}-{模塊名}-{狀態描述}
   經常使用狀態有：hover, current, selected, disabled, focus, blur, checked, success, error 等
3. 子模塊： {命名空間}-{模塊名}-{子模塊名}
   經常使用模塊名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 詞義表達組件要實現的功能。
4. 模塊嵌套：
   
   1 <ul class="demo-nav">
   2     <li class="demo-nav-item">
   3         <a href="#">nav</a>
   4         <ul class="demo-subnav">
   5             <li class="demo-subnav-item">
   6                 <a href="#">subNav</a>
   7                     <ul class="demo-list">
5. 統一命名風格（使用相同名詞命名不一樣組件的子元素）：如 demo-tab-head, demo-modal-head，便於理解。