CSS 編碼規範

1、CSS 書寫規範

縮進

使用 4 個空格作爲一個縮進層級。

.selector {
    margin: 0;
    padding: 0;
}

空格

1.選擇器與 '{' 之間要包含空格；
2.屬性名與以後的 ':' 之間不容許包含空格， ':' 與 屬性值之間要包含空格；
3.列表型屬性值書寫在單行時，',' 後要跟一個空格；
4.註釋 '/*' 後和 '*/' 前要有一個空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "選擇器的兩邊各保留一個空格。

main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

分號

每一個屬性聲明末尾都要加分號。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空行

1.'}' 後最好跟一個空行，包括 scss、less等中嵌套的規則；
2.屬性之間須要適當的空行。

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

換行

1.'{' 後和 '}' 前；
2.每一個屬性獨佔一行；
3.多個規則的分隔符 ',' 後。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}

引號

1.最外層統一使用雙引號；
2.url的內容要用引號；
3.屬性選擇器中的屬性值須要引號。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

選擇器

1.避免出現過多的祖先選擇器，各瀏覽器會有性能差別，消耗在選擇器的時間也不盡相同。
儘可能最多控制在3級之內。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的狀況下不要使用元素標籤名和 id 或 class 進行組合。

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

屬性書寫順序

1.同一 rule set 下的屬性在書寫時，應按功能進行分組，並以 Formatting Model（佈局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提升代碼的可讀性;
2.Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等；
Box Model 相關屬性包括：border / margin / padding / width / height 等；
Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等；
3.Visual 相關屬性包括：background / color / transition / list-style 等；
4.另外，若是包含 content 屬性，應放在最前面。

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

數值

當數值爲 0 - 1 之間的小數時，省略整數部分的 0。

panel {
    opacity: .8;
}

長度

長度爲 0 時須省略單位。 (也只有長度單位可省)

body {
    padding: 0 5px;
}

顏色

1.rgb 顏色值使用十六進制記號形式 #rrggbb。不要使用 rgb()；
2.帶有 alpha 的顏色信息可使用 rgba()。使用 rgba() 時每一個逗號後必須保留一個空格。

.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

3.顏色值能夠縮寫時，使用縮寫形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

4.顏色值不要使用命名色值。

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

5.顏色值中的英文字符采用小寫。如不用小寫也須要保證同一項目內保持大小寫一致。

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，經過縮進的方式，讓每一個屬性的值在垂直方向對齊，這樣便於多行編輯。

/* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

不要使用 @import

與 <link> 標籤相比，@import 指令要慢不少，不光增長了額外的請求次數，還會致使不可預料的問題。替代辦法有如下幾種：

使用多個 <link> 元素；
經過 Scss 或 Less 相似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件；
經過 Rails、Jekyll 或其餘系統中提供過 CSS 文件合併功能。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
    @import url("more.css");
</style>

2、CSS 命名規範

1.類名使用小寫字母，以中劃線分隔。
2.避免過分任意的簡寫，要意義明確。.btn 表明 button，可是 .s 不能表達任何意思。
3.id採用駝峯式命名
4.scss、less等中的變量、函數、混合、placeholder採用駝峯式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 變量 */
$colorBlack: #000;

/* 函數 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附經常使用類 / id 命名規範：

頁　眉：header
內　容：content
容　器：container
頁　腳：footer
版　權：copyright　
導　航：menu
主導航：mainmenu
子導航：submenu
標　志：logo
標　語：banner
標　題：title
側邊欄：sidebar
圖　標：icon
注　釋：note
搜　索：search
按　鈕：btn
登　錄：login
鏈　接：link
信息框：message

3、CSS 註釋

1.註釋能夠統一用'/* */'；
2.縮進與下一行代碼保持一致；
3.可位於一個代碼行的末尾，與代碼間隔一個空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

4、編輯器配置

將你的編輯器進行設置，能夠避免常見的代碼不一致和差別。
具體配置信息可查看這裏