css編碼規(guī)范

jayce 發(fā)布于2019-08-28 18:22 / 1254人閱讀

摘要：例行長(zhǎng)度重要每行不得超過(guò)個(gè)字符，除非單行不可分割例如超長(zhǎng)。例屬性前綴建議屬性的私有前綴按長(zhǎng)到短排列，按對(duì)其例

* 約定：以下事例代碼中所用單位均為 rem ，關(guān)于 rem 單位的使用可參照《移動(dòng)端web app自適應(yīng)布局探索與總結(jié)》

1 命名 1.1 文件命名

常用的文件命名：

全局：global.css

結(jié)構(gòu)：layout.css

模塊：module.css

主題：themes.css

較長(zhǎng)文件名必須以 - 中橫杠符連接，項(xiàng)目里面的私有樣式文件：項(xiàng)目名-業(yè)務(wù)模塊名稱.css。

例:

/* 項(xiàng)目名為clout */

/* good */
clout-home.css

/* bad */
cloutHome.css;

1.2 選擇器命名

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

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

較長(zhǎng)選擇器名字之間使用-中橫桿連接。

當(dāng)判斷容易出現(xiàn)命名沖突的時(shí)候，命名需按規(guī)則：模塊名-你的選擇器名，如果出現(xiàn)多層級(jí)選擇器的情況（應(yīng)盡量避免超過(guò)3級(jí)的情況），每個(gè)層級(jí)間使用-中橫桿連接，不建議直接使用嵌套。

例：

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

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

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

    
        標(biāo)題
    


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

/* bad */

    
        標(biāo)題
    


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

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

頭部：header（hd）

標(biāo)題：title

內(nèi)容：container/content（cont）

頁(yè)面主題：body（bd）/main

尾部：footer（ft）

導(dǎo)航：nav

子導(dǎo)航：subnav

標(biāo)簽頁(yè)：tab

側(cè)欄：sidebar

欄目：column/col

外圍控制布局：wrapper

左中右：left center right

菜單：menu

子菜單：submenu

列表：list

當(dāng)前的：active

圖標(biāo)：icon

提示信息：msg

小技巧：tips

2 代碼風(fēng)格 2.1 縮進(jìn)

（重要）統(tǒng)一使用 4 個(gè)空格縮進(jìn)，不得使用 tab 和 2 個(gè)空格（沒規(guī)范前的縮進(jìn)方式不管）。

sublime -> tab鍵轉(zhuǎn)空格

eclipse、sts -> tab鍵轉(zhuǎn)空格

2.2 空格

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

例：

/* good */
.selector {
}

/* bad */ 
.selector{
}

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

例：

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

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

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

例：

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

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

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

/* bad */

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

...

...

2.3 換行

（重要）一個(gè)rule中有多個(gè)選擇器時(shí)，選擇器間必須換行。

例：

/* 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;
}

（建議）對(duì)于超長(zhǎng)的樣式屬性值，可在空格或 , 處換行。

例：

.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))
    )
}

2.4 行長(zhǎng)度

（重要） 每行不得超過(guò) 120 個(gè)字符，除非單行不可分割（例如url超長(zhǎng)）。

3 值與單位 3.1 文本

（重要）文本內(nèi)容必須用雙引號(hào)包圍。

例：

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

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

3.2 數(shù)值

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

例：

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

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

3.3 單位

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

例：

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

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

3.4 url()

（重要） url() 函數(shù)中的路徑不加引號(hào)

例：

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

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

（建議） url() 函數(shù)中的絕對(duì)路徑可省去協(xié)議名

例：

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

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

3.5 顏色

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

解釋：

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

例：

/* 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);
}

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

例：

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

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

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

例：

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

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

（建議）顏色值中的英文字母使用小寫，如果采用大寫字母，則必須保證同一項(xiàng)目?jī)?nèi)是一致的。

例：

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

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

4 通用 4.1 選擇器

（重要）DOM節(jié)點(diǎn) id、class 屬性賦值時(shí) = 之間不得有空格，屬性值必須用雙引號(hào)包圍，不得用單引號(hào)。

例：

/* good */



/* bad */

（重要）如無(wú)必要，盡量不使用 id 選擇器，給 id、class 選擇器設(shè)置屬性時(shí)不需要添加類型選擇器進(jìn)行限定。

例：

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

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

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

例：


    提示語(yǔ)


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

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

4.2 屬性縮寫

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

例：

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

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

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

例：




.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;
}

4.3 屬性書寫順序

（建議）按如下順序書寫，摘自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;
}

4.4 變換與動(dòng)畫

（重要） 使用 transition 時(shí)應(yīng)指定 transiton-property，不用 all。

例：

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

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

4.5 屬性前綴

（建議）屬性的私有前綴按長(zhǎng)到短排列，按 : 對(duì)其

例：

/* 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;
}