css編碼規範

時間 2019-11-09

標籤 css 編碼規範欄目 CSS 简体版

原文原文鏈接

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

1 命名

1.1 文件命名

經常使用的文件命名：html

全局：global.cssweb
結構：layout.csssegmentfault
模塊：module.csssublime-text
主題：themes.cssapp

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

例:移動端web

/* 項目名爲clout */

/* good */
clout-home.css

/* bad */
cloutHome.css;

1.2 選擇器命名

（重要）在不是必須的狀況下儘量不用id選擇器。ide

選擇器名字全小寫，不得使用大寫。函數
較長選擇器名字之間使用-中橫杆鏈接。
當判斷容易出現命名衝突的時候，命名需按規則：模塊名-你的選擇器名，若是出現多層級選擇器的狀況（應儘可能避免超過3級的狀況），每一個層級間使用-中橫杆鏈接，不建議直接使用嵌套。

例：

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

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

/* 模塊及嵌套 */
/* good */
<div class="mydialog">
    <div class="mydialog-hd">
        <p class="mydialog-hd-title">標題</p>
    </div>
</div>

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

/* bad */
<div class="mydialog">
    <div class="hd">
        <p class="title">標題</p>
    </div>
</div>

.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

2 代碼風格

2.1 縮進

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

2.2 空格

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

例：

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

...

...

2.3 換行

（重要）一個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))
    )
}

2.4 行長度

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

3 值與單位

3.1 文本

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

例：

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

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

3.2 數值

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

例：

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

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

3.3 單位

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

例：

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

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

3.4 url()

（重要） 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);
}

3.5 顏色

（重要）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;
}

4 通用

4.1 選擇器

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

例：

/* good */
<div class="container" id="container">
</div>

/* bad */
<div class = "container" id='container'>
</div>

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

例：

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

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

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

例：

<div class="footer">
    <span id="tips">提示語</span>
</div>

/* 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 等縮寫時，應注意確實須要設置多個方向的值時才使用縮寫，避免其餘方向的有用值被覆蓋掉

例：

<div class="wrap list-wrap">
</div>

.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 變換與動畫

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

例：

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

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

4.5 屬性前綴

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

例：

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