第4章：CSS規(guī)范

4.1 CSS規(guī)范簡介

• 規(guī)范化的代碼更易于閱讀每强，降低不管是修改現(xiàn)有代碼竭讳，還是擴展新代碼的維護成本。
• 代碼的規(guī)范化問題创肥，往往在規(guī)模大的項目協(xié)作中突顯出來。1個人的代碼寫得晦澀難懂值朋，別人也無從得知叹侄，但如果在100個人的項目組中，每個人都在寫爛代碼昨登，項目只會是舉步維艱趾代。

4.2 命名規(guī)范

4.2.1 CSS文件命名

注意：在開發(fā)階段，我們通常將不同作用的css代碼段放到多個獨立的文件丰辣，以便于開發(fā)和修改撒强。在發(fā)布時，則會通過工具把多個CSS文件壓縮合并成一個文件笙什，避免頁面引發(fā)多次HTTP請求載入多個文件飘哨。

• 常用的css文件名：

4.2.2 id和class命名

• 頁面id和class是會影響搜索引擎優(yōu)化的，如果頁面的元素命名很隨意愁憔，導致搜索引擎小蜘蛛迷路腕扶，它以后就會很少來光顧你的網站。
• 常見的id和class的命名方式有三種：
  • 駝峰命名法（subLeftMenu）;
  • 中劃線命名法（sub-left-menu）;
  • 下劃線命名法（sub_left_menu）;
• id和class命名的注意事項：
  • 使用英文命名而非中文拼音惩淳；
  • 命名盡量不縮寫蕉毯，或者采用常用的縮寫單詞，比如nav思犁；
  • 命名規(guī)范保持統(tǒng)一代虾，不要混入多種命名方式；
  • 為避免class命名的重復激蹲，通常使用父元素的class名作為前綴棉磨；

    <div class="column">
        <h3 class="column-title"></h3>
        <div class="column-content"></div>
    </div>
    

• 參考采用常見的頁面主體部分的命名：

4.3 書寫規(guī)范

• 對于普通的CSS代碼，建議以下的CSS書寫順序來書寫：

• 當然并不是說書寫CSS時要按這樣的順序來寫，你可以先定義盒模型的屬性挪鹏，再定義元素的布局屬性见秽，但最終提交代碼時，元素的CSS樣式代碼按照是這樣的順序就可以了讨盒。簡單來說是解取，只關心“書寫結果”，而不是“書寫過程”返顺。
• 案例：

#main{
    /*布局屬性*/   
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    /*盒模型屬性*/
    width:100px;
    height:100px;
    border:1px solid gray;
    /*文本性屬性*/
    font-size:15px;
    font-weight:boder;
    text-indent:2em;
    /*裝飾性屬性*/
    color:#fff;
    backgroud-color:Red;
    /*其他屬性*/
    cursor:pointer;
}

• 除了普通的CSS代碼之外禀苦，還有一些專門為了實現(xiàn)特殊功能的CSS代碼，比如單行文本居中遂鹊、塊元素居中之類的代碼振乏。書寫這類CSS代碼，可以不遵循上面提到的書寫順序秉扑，而是單獨插入其中慧邮。舉例：

#main{
    /*布局屬性*/   
    float:left;
    width:100px;
    /*單行文本居中*/
    height:50px;
    line-height:50px;
}

4.4 注釋規(guī)范

• 文件頂部注釋通常包含文件的說明调限、文件的版本更新、作者以及版權聲明：

/*
 * @description: 說明
 * @author: 作者
 * @update: 更新時間误澳，如2018-01-28
 */

• 模塊注釋是各個頁面組件模塊（如導航耻矮、底部信息欄）的注釋說明，一般說明代碼的“開始”和“結束”：

/*導航欄代碼忆谓，開始*/
........
/*導航欄代碼裆装，結束*/

• 除此之外，我們還可以向關鍵代碼添加單行/多行注釋：

/* 單行注釋內容 */
/* 
 * 多行注釋內容
 * 多行注釋內容
 * 多行注釋內容
 */

• 項目發(fā)布時倡缠，工具往往會將代碼中的注釋全部刪除哨免，但通過在注釋中添加感嘆號，可以保留注釋內容：

/*! 
 *! 發(fā)布版本: V1.1 
 *! 時間: 2018-01-28 
 */

4.5 CSS reset

• HTML元素在不同的瀏覽器上的默認樣式是不一樣的昙沦，往往會給開發(fā)帶來較大的麻煩琢唾。而解決這一煩惱問題的辦法就是：去除HTML元素在瀏覽器的默認樣式（CSS reset）。
• 我們不建議直接通過通配符來執(zhí)行CSS reset盾饮，比如*{padding:0;margin:0;}慧耍，因為它會查詢并修改所有元素的樣式屬性，性能較低丐谋。這里我們推薦參考使用Eric Meyer發(fā)布的 重置樣式表芍碧。
• CSS reset的注意事項：
  • CSS reset是所有樣式代碼的前提，所以應該將CSS reset代碼段方到最前面才有意義号俐；
  • 應該根據(jù)項目的具體情況泌豆，對重置樣式表來進行調整使用，而不是簡單的復制粘貼到項目中吏饿，所謂“濫用不如不用”踪危；