摘要：例行長度重要每行不得超過個字符，除非單行不可分割例如超長。例屬性前綴建議屬性的私有前綴按長到短排列，按對其例

* 約定： 以下事例代碼中所用單位均為 rem ，關于 rem 單位的使用可參照 《移動端web app自適應布局探索與總結》

常用的文件命名：

全局：global.css

結構：layout.css

模塊：module.css

主題：themes.css

較長文件名必須以 - 中橫杠符連接，項目里面的私有樣式文件：項目名-業務模塊名稱.css。

例:

/* 項目名為clout */

/* good */
clout-home.css

/* bad */
cloutHome.css;

（重要）在不是必須的情況下盡可能不用id選擇器。

選擇器名字全小寫，不得使用大寫。

較長選擇器名字之間使用-中橫桿連接。

當判斷容易出現命名沖突的時候，命名需按規則：模塊名-你的選擇器名，如果出現多層級選擇器的情況（應盡量避免超過3級的情況），每個層級間使用-中橫桿連接，不建議直接使用嵌套。

例：

/* 選擇器名稱 */
/* good */
.mydialog {
    font-size: .28rem;
} 

/* bad */
.myDialog {
    font-size: .28rem;
}

/* 模塊及嵌套 */
/* good */

    

        
標題
    


.mydialog-hd-title {
    color: #3f3f3f;
}

/* bad */

    

        
標題
    


.mydialog .hd .title {
    color: #3f3f3f;
}

（建議）常用的選擇器命名：

頭部：header（hd）

標題：title

內容：container/content（cont）

頁面主題：body（bd）/main

尾部：footer（ft）

導航：nav

子導航：subnav

標簽頁：tab

側欄：sidebar

欄目：column/col

外圍控制布局：wrapper

左中右：left center right

菜單：menu

子菜單：submenu

列表：list

當前的：active

圖標：icon

提示信息：msg

小技巧：tips

（重要）統一使用 4 個空格縮進，不得使用 tab 和 2 個空格（沒規范前的縮進方式不管）。

sublime -> tab鍵轉空格

eclipse、sts -> tab鍵轉空格

（重要）選擇器跟 { 之間必須包含空格。

例：

/* good */
.selector {
}

/* bad */ 
.selector{
}

（重要）屬性跟 : 之間不能有空格，: 跟屬性值之間必須包含空格。

例：

/* good */
.selector {
    color: #3f3f3f;
}

/* bad */
.selector {
    color:#3f3f3f; /* 或 color : #3f3f3f; */
}

（重要） >、+、~選擇器的兩邊各保留一個空格。

例：

/* good */
.header > .title {
    padding: .1rem;
}

label + input {
    margin-left: .04rem;
}

input:checked ~ .input-face {
    background-color: #ccc;
}

/* bad */

.header>.title {
    padding: .1rem;
}

...

...

（重要）一個rule中有多個選擇器時，選擇器間必須換行。

例：

/* good */
p,
div,
input,
textarea {
    font-size: .28rem;
}

/* bad */
p, div, input, textarea {
    font-size: .28rem;
}

（重要）屬性值之間必須換行。

例：

/* good */
.content {
    padding: .1rem;
    color: #3f3f3f;
}

/* bad */
.content {
    padding: .1rem; color: #3f3f3f;
}

（建議）對于超長的樣式屬性值，可在 空格 或 , 處換行。

例：

.selector {
    bakcground: 
        url(veryveryveryveryveryLongUrlHere/image/icon.png) 
        no-repeat 0 0;
}

.selector {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.04, rgb(88,94,124)),
        color-stop(0.52, rgb(115,123,162))
    )
}

（重要） 每行不得超過 120 個字符，除非單行不可分割（例如url超長）。

（重要）文本內容必須用雙引號包圍。

例：

/* good */
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

/* bad */
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

（重要）數值為 0 - 1 之間的小數，省略整數部分的 0 。

例：

/* good */
body {
    font-size: .28rem;
}

/* bad */ {
    font-size: 0.28rem;
}

（重要）數值為 0 的屬性值須省略單位。

例：

/* good */
body {
    padding: 0 .1rem;
}

/* bad */
body {
    padding: 0rem .1rem;
}

（重要） url() 函數中的路徑不加引號

例：

/* good */
body {
    background: url(bg.png);
}

/* bad */
body {
    background: url("bg.png");
}

（建議） url() 函數中的絕對路徑可省去協議名

例：

/* good */
body {
    background: url(//yunzhijia.com/images/bg.png);
}

/* bad */
body {
    background: url(http://yunzhijia.com/images/bg.png);
}

（重要）RGB顏色值必須使用十六進制形式 #3f3f3f。不允許使用 rgb()。

解釋：

帶有alpha（不透明度）的顏色信息可以使用 rgba()。使用 rgba() 時每個逗號后須保留一個空格。

例：

/* good */
.border {
    border: 1px solid #dce1e8;
}

.overlayer {
   background-color: rgba(0, 0, 0, .7); 
}

/* bad */
.border {
    border: 1px solid rgb(220, 225, 232);
}

.overlayer {
    background-color: rgba(0,0,0,.7);
}

（重要）顏色值可縮寫時，須使用縮寫形式。

例：

/* good */
.text-grey {
    color: #ccc;
}

/* bad */
.text-grey {
    color: #cccccc;
}

（重要）顏色值不可使用顏色單詞。

例：

/* good */
.text-red {
    color: #f00;
}

/* bad */
.text-red {
    color: red;
}

（建議）顏色值中的英文字母使用小寫，如果采用大寫字母，則必須保證同一項目內是一致的。

例：

/* good */
.border-color {
    border-color: #dce1e8;
}

/* bad */
.border-color {
    border-color:  #DCE1E8;
}

（重要）DOM節點 id、class 屬性賦值時 = 之間不得有空格，屬性值必須用雙引號包圍，不得用單引號。

例：

/* good */



/* bad */

（重要）如無必要，盡量不使用 id 選擇器，給 id、class 選擇器設置屬性時不需要添加類型選擇器進行限定。

例：

/* good */
#footer,
.container {
    background-color: #fff;
}

/* bad */
div#footer,
div.container {
    background-color: #fff;
}

（重要） id 選擇器不需嵌套其他選擇器。

例：

    提示語


/* good */
#tips {
    color: #bdbdbd;
}

/* bad */
.footer #tips {
    color: #bdbdbd;
}

（建議）在可以使用縮寫的情況下，盡量使用屬性縮寫。

例：

/* good */
body {
    font: .28rem/1.25 Helvetica;
}

/* bad */
body {
    font-family: Helvetica;
    font-size: .28rem;
    line-height: 1.25;
}

（建議）使用 border、margin、padding 等縮寫時，應注意確實需要設置多個方向的值時才使用縮寫，避免其他方向的有用值被覆蓋掉

例：

.wrap {
    padding: .1rem;
    border: 1px solid #dce1e8;
}

/* good */
.list-wrap {
    padding-left: .2rem;
    padding-right: .2rem;
    border-color: #ccc;
}

/* bad */
.list-wrap {
    padding: .2rem .1rem;
    border: 1px solid #ccc;
}

（建議）按如下順序書寫，摘自http://www.zhihu.com/question/19586885/answer/48933504

位置屬性(position, top, right, z-index,display, float, overflow 等)

大小(width, height, padding, margin, border)　　

文字系列(font, line-height, letter-spacing,color- text-align等)

視覺(background, color, list-style等)　　

其他(animation, transition等)

例：

.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    
    width: 100%;
    height: .5rem;
    padding: .1rem;
    border: 1px solid #dce1e8;
    box-sizing: border-box;
    
    font-size: .28rem;
    line-height: 1.25;
    
    background: #e9ecf1;
    color: #3f3f3f;
    
    -webkit-transition: color .5s;
       -moz-transition: color .5s;
            transition: color .5s;
}

（重要） 使用 transition 時應指定 transiton-property，不用 all。

例：

/* good */
.tab {
    transition: color 1s, background-color: 1s;
}

/* bad */
.tab {
    transition: all 1s;
}

（建議）屬性的私有前綴按長到短排列，按 : 對其

例：

/* good */
.tab {
    -webkit-transition: color .5s;
       -moz-transition: color .5s;
            transition: color .5s;
}

/* bad */
.tab {
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    transition: color .5s;
}