整理CSS引發的相關理論的梳理

寫在前面

因為原先項目中的CSS樣式亂得不行，所以領導決定要花大時間整理一下樣式，也為了后續維護起來方便。其實也苦了自己，想想也是一件多煩的事情，煩的原因並非是說這件事情做起來沒有意義，而是覺得這樣的事情不需要任何技術含量，按照定下來的一套准則然后ctrl+c和ctrl+v就可以了。

如果真這樣想，那還真是大錯特錯了。拿個很簡單的比喻來說吧，同樣是手機，有些手機一兩百卻沒有人要，而蘋果那么貴還是有那么多人爭先恐后的跑去買。原因在哪？

把平凡簡單的事情做到最好才是最重要的。

為了把項目的樣式整理好，也為了接下來的頁面排版少花些工夫能做好，決定在如下幾方面花點心思

1、樣式規范（包括命名規范、一些約定俗成的准則）

2、簡化代碼

3、性能方面

全局命名規范

1、文件命名規范：按每一塊功能放到一起。其實CSS跟設計模式的思想也是一樣的，每個文件都要盡量最小，要有單一職責思想。（我們約定的規則是文件名大寫開頭，如果一個文件太大了，就盡量把它分離成多個以實現每個文件只做一件事情 ）

也許這時候會有人問了，不是說了要減少http請求嗎？如果分離成多個文件的話不是增加了http請求嗎？事實上分離出來的文件只是我們在開發的時候方便，發布的時候我們自然會做打包壓縮的事情

2、樣式命名規范：每個做過開發的朋友估計都會有分層的思想，最簡單的分層就是三層模式了，事實上三層的思想也是可以應用到css當中來的。

我們把最底層的樣式以g-開頭

 

稍微控件級別的樣式以u-開頭

其它頁面級別的樣式就以類名m-類名-要起的名字開頭

注釋規范

頂部文檔注釋

/*
 * @description: 中文說明
 * @author: name
 * @update: name(xxxx-xx-xx xx:xx)
 */

屬性注釋

/*Header*/

如下圖所示

排版規范

• 使用4tab來縮進
• 規則統一寫成多行
• 每一個屬性值必須添加分號
• 如果多個屬性公用一個樣式集，則多個屬性必須寫成多行形式

專門去了解了一下屬性相關的順序，哪樣寫會比較相對性能好一些。其實大致的規則是這樣的

屬性編寫順序（一般遵循顯示屬性 -> 自身屬性 -> 文本屬性 -> 其他屬性的書寫格式）

• 顯示屬性：display/list-style/position/float/clear...
• 自身屬性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
• 其他：cursor/z-index/zoom/overflow...
• CSS3屬性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-/std的順序進行添加，標准屬性寫在最后
• 鏈接的樣式請嚴格按照如下順序添加：a:link -> a:visited -> a:hover -> a:active

借用別人的圖來展示一下其它的順序是顯示屬性-->自身屬性-->文本屬性-->其它屬性

代碼性能優化

1、使用CSS縮寫屬性：CSS有些屬性是可以縮寫的，比如padding,margin,font,background等等

2、去掉0后面的單位

3、去掉小數點前面的0

4、16進制的顏色代碼縮寫

5、禁止在css中使用*選擇符

6、選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置

7、如果沒有邊框時，不要寫成border:0;應該寫成border:none

8、在保存代碼解耦的前提下，盡量合並重復的樣式

9、盡量不要在CSS中使用!important

10、層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高級(最高級為999)，不同彈窗氣泡之間可在三位數之間調整，普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比

11、盡量減少使用float、position等影響性能的屬性

 

 

以我寫的footer底部組件來舉個例吧

實現的效果圖如下：

界面HTML代碼如下：

    <ul class="u-foot-home">
        <li class="on"><i class="u-icon-book"></i><br>首頁</li>
        <li><i class="u-icon-auth"></i><br>授權<em class="num" style="display: none;"></em></li>
        <li><i class="u-icon-trip"></i><br>行程</li>
        <li><i class="u-icon-my"></i><br>我的</li>
    </ul>
    <ul class="u-foot-fltSearch">
        <li class="on"><i class="u-icon-fltBook"></i><br>機票預訂</li>
        <li><i class="u-icon-fltInfo"></i><br>航班動態</li>
        <li><i class="u-icon-fltZj"></i><br>在線值機</li>
    </ul>
    <ul class="u-foot-fltList">
        <li class="on"><i class="u-icon-fliterTime"></i><br><span>從早到晚</span></li>
        <li><i class="u-icon-fliterPrice"></i><br><span>價格排序</span></li>
        <li><i class="u-icon-fliter"></i><br>篩選</li>
    </ul>
    <ul class="u-foot-hotelList">
        <li><i class="u-icon-fliterHotelSort"></i><br><span>推薦排序</span></li>
        <li><i class="u-icon-fliterPrice"></i><br><span>價格星級</span></li>
        <li class="on"><i class="u-icon-fliter"></i><br>更多篩選</li>
    </ul>
    <ul class="u-foot-trainList">
        <li class="on"> 出發 <i class="u-icon-fliterSort"></i></li>
        <li> 到達 <i class="u-icon-fliterSort on"></i></li>
        <li> 耗時 <i class="u-icon-fliterSort off"></i></li>
        <li> <i class="u-icon-fliterSet"></i>篩選 </li>
    </ul>

css代碼如下：

/*
 * @description: 底部公共組件（包括首頁、機票、酒店、火車票）
 * @author: angela 
 */
/*common css*/
[class^="u-foot"]
{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 49px;
    box-sizing: border-box;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .2s;
    z-index: 3;
}
/*因為所有底部標簽都用的ul li  故li*/
[class^="u-foot"] li
{
    position: relative;
    height: 49px;
    -webkit-box-flex: 1;
    text-align: center;
}

/*首頁底部*/
.u-foot-home
{
    display: -webkit-box;
    line-height: 1.3;
    background-color: #132436;
    color: #8bc0f3;
    font-size: 11px;
}
.u-foot-home li
{
    display: block;
    padding-top: 8px;
}

/*首頁底部每個li選中的*/
.u-foot-home .on
{
    background-color: #0c1a2a;
    color: #fff;
}

/*有消息狀態下*/
.u-foot-home em
{
    display: block;
    position: absolute;
    top: 5px;
    left: 50%;
    min-width: 12px;
    height: 16px;
    margin-left: 10px;
    padding: 0 2px;
    border-radius: 13px;
    background-color: #ff5d1d;
}

/*航班查詢界面底部*/
.u-foot-fltSearch
{
    display: -webkit-box;
    color: #333;
    background-color: #e2e2e2;
}
.u-foot-fltSearch li
{
    width: 50%;
    line-height: 0.9;
    padding-top: 5px;
    border-top: 1px solid #d6d6d6;
}

/*航班查詢界面每個li選中狀態下*/
.u-foot-fltSearch li.on
{
    color: #3f87cf;
}

/*航班列表界面底部*/
.u-foot-fltList
{
    display: -webkit-box;
    color: #fff;
    background-color: rgba(39,57,71,0.9);
}
.u-foot-fltList li
{
    width: 1px;
    line-height: .8;
    padding: 7px 0;
}


/*酒店列表底部*/
.u-foot-hotelList
{
    color: #fff;
    background-color: rgba(39,57,71, 0.9);
}
.u-foot-hotelList li
{
    display: inline-block;
    width: 32.5%;
    line-height: 0.8;
    padding: 7px 0;
}
.u-foot-hotelList i
{
    margin-bottom: 4px;
    width: 20px;
    height: 20px;
}
/*酒店列表底部更多篩選有紅點提示*/
.u-foot-hotelList .on .u-icon-fliter::after
{
    position: absolute;
    right: -10px;
    top: -4px;
    width: 8px;
    height: 8px;
    background-color: #ff5d1d;
    border-radius: 8px;
    content: " ";
}

/*火車票底部*/
.u-foot-trainList
{
    display: -webkit-box;
    background-color: rgba(0, 0, 0, 0.8);
}
.u-foot-trainList li
{
    display: block;
    line-height: 48px;
    color: #fff;
}
.u-foot-trainList li.on
{
    color: #E3AF00;

}

總結：

其實之前實現底部css控件的代碼至少三百多行，現在被我這么一整理，單從版式上來看就特別舒服，而且也只用了一百多行代碼。

其實之所以能節省那么多行代碼主要是用了同樣的ul li而已並且用了css3的屬性選擇器

/*common css*/
[class^="u-foot"]
{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 49px;
    box-sizing: border-box;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .2s;
    z-index: 3;
}
/*因為所有底部標簽都用的ul li  故li*/
[class^="u-foot"] li
{
    position: relative;
    height: 49px;
    -webkit-box-flex: 1;
    text-align: center;
}

如果覺得這篇文章還算用心，請勞駕點右下角的推薦。小女子在此謝過了。^_^