本規范適用于 CSS 及其預編譯語言（Sass、Less）的編碼風格，部分規則可通過 stylelint 工具實現。

1 CSS

1.1 編碼規范

具體規則如下：

1.1.1 【強制】所有聲明必須以分號結尾

stylelint: declaration-block-trailing-semicolon

雖然 CSS 語法中最后一條聲明的分號是可選的，但統一使用分號能提高代碼一致性和可維護性。

/* bad */
.selector {margin-top: 10pxpadding-left: 15px
}/* good */
.selector {margin-top: 10px;padding-left: 15px;
}

1.1.2 【推薦】使用 2 個空格縮進

stylelint: indentation

/* bad */
.selector {padding-left: 15px;
}/* good */
.selector {padding-left: 15px;
}

1.1.3 【推薦】選擇器與 { 之間保留一個空格

stylelint: block-opening-brace-space-before

/* bad */
.selector{padding-left: 15px;
}/* good */
.selector {padding-left: 15px;
}

1.1.4 【推薦】屬性值規范

stylelint: declaration-colon-space-after, declaration-colon-space-before

/* bad */
.selector {margin-top : 10px;padding-left:15px;
}/* good */
.selector {margin-top: 10px;padding-left: 15px;
}

1.1.5 【推薦】組合器規范

stylelint: selector-combinator-space-before, selector-combinator-space-after

/* bad */
.selector>.children {padding-left: 15px;
}
.selector+.brother {padding-left: 15px;
}/* good */
.selector > .children {padding-left: 15px;
}
.selector + .brother {padding-left: 15px;
}

1.1.6 【推薦】逗號分隔規范

stylelint: value-list-comma-space-after

/* bad */
.selector {background-color: rgba(0,0,0,0.5);box-shadow: 0px 1px 2px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.5);
}/* good */
.selector {background-color: rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

1.1.7 【推薦】注釋規范

stylelint: comment-whitespace-inside

/* bad */
.selector {/*comment*//*  comment  *//***comment*/padding-left: 15px;
}/* good */
.selector {/* comment *//*** comment*/padding-left: 15px;
}

1.1.8 【推薦】右大括號規范

聲明塊的右大括號 } 應單獨成行。

/* 不推薦 */
.selector {padding-left: 15px;}/* 推薦 */
.selector {padding-left: 15px;
}

1.1.9 【推薦】屬性聲明規范

屬性聲明應單獨成行。
stylelint: declaration-block-single-line-max-declarations

/* 不推薦 */
.selector {padding-left: 15px;  margin-left: 10px;
}/* 推薦 */
.selector {padding-left: 15px;margin-left: 10px;
}

1.1.10 【推薦】代碼行長度規范

單行代碼長度不超過 100 個字符。
stylelint: max-line-length
例外情況：

• 使用 url() 函數時
• 屬性值本身無法換行（不含空格或逗號）

/* 不推薦 */
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)));/* 推薦 */
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))
);

1.1.11 【參考】多選擇器規范

多個選擇器應分行書寫。
stylelint: selector-list-comma-newline-after

/* 不推薦 */
.selector, .selector-secondary, .selector-third {padding: 15px;margin-bottom: 15px;
}/* 推薦 */
.selector,
.selector-secondary,
.selector-third {padding: 15px;margin-bottom: 15px;
}

1.1.12 【參考】單行聲明規范

即使聲明塊內只有一條語句，也應使用多行格式。

/* 不推薦 */
.selector { padding-left: 15px; }/* 推薦 */
.selector {padding-left: 15px;
}

1.1.13 【參考】注釋規范

注釋上方需留空行（除非上方是注釋或塊頂部）。
stylelint: comment-empty-line-before

/* 不推薦 */
.selector {/* 注釋 */padding-left: 15px;/* 注釋 */padding-right: 15px;
}/* 推薦 */
.selector {/* 注釋 */padding-left: 15px;/* 注釋 */padding-right: 15px;
}

1.2 選擇器規范

1.2.1 【參考】避免使用 ID 選擇器

stylelint: selector-max-id
ID 選擇器優先級過高，會導致后續樣式難以覆蓋，可能引發 !important 濫用。

/* 不推薦 */
#special {padding: 15px;
}/* 推薦 */
.special {padding: 15px;
}

1.2.2 【參考】屬性選擇器引號規范

屬性選擇器的值需用雙引號包裹。
stylelint: selector-attribute-quotes

/* 不推薦 */
input[type=text] {height: 20px;
}/* 推薦 */
input[type="text"] {height: 20px;
}

1.2.3 【參考】選擇器性能優化

優化建議：

1. 優先使用 class 而非元素標簽
2. 避免在常用組件中使用屬性選擇器（如 [class^=“…”])
3. 控制選擇器長度（不超過3個組合）

選擇器效率排序（高→低）：
ID 選擇器（#header）
類選擇器（.header）
標簽選擇器（div）
相鄰兄弟選擇器（h2 + p）
子選擇器（ul > li）
后代選擇器（ul a）
通配符選擇器（*）
屬性選擇器（[class^=“grid-”]）
偽類/偽元素選擇器（a:hover, a::before）

1.3.屬性和屬性值

1.3.1.【推薦】使用簡短的十六進制值。

stylelint: color-hex-length

/* 不推薦 */
.selector {color: #ffffff;
}/* 推薦 */
.selector {color: #fff;
}

1.3.2.【推薦】避免使用!important覆蓋樣式。

1.3.3.【推薦】十六進制值統一使用小寫字母（更易辨識）。

stylelint: color-hex-case

/* 不推薦 */
.selector {color: #FEFEFE;
}/* 推薦 */
.selector {color: #fefefe;
}

1.3.4.【推薦】當長度值為0時，省略單位。

stylelint: length-zero-no-unit

/* 不推薦 */
.selector {margin-top: 0px;font-size: 0em;
}/* 推薦 */
.selector {margin-top: 0;font-size: 0;
}

1.3.5.【參考】保留小數點前的0。

stylelint: number-leading-zero

/* 不推薦 */
.selector {opacity: .5;left: -.5px;
}/* 推薦 */
.selector {opacity: 0.5;left: -0.5px;
}

1.3.6.【參考】屬性聲明順序建議：

1. 定位屬性（position、z-index等）
2. 盒模型屬性（display、width等）
3. 排版屬性（font、color等）
4. 外觀屬性（background等）
5. 其他屬性

1.3.7.【參考】合理使用簡寫屬性。

stylelint: declaration-block-no-shorthand-property-overrides

/* 不推薦 */
.selector {margin: 0 0 10px;
}/* 推薦 */
.selector {margin-bottom: 10px;
}

1.4.其他

1.4.1.【推薦】避免使用CSS的@import。

與 相比，@import 會在關鍵渲染路徑上增加更多的往返（即關鍵路徑的深度變長），這樣會導致瀏覽器處理 CSS 文件速度變慢，因此我們應該避免使用 @import。

/* 不推薦 */
<style>@import url("more.css");
</style>/* 推薦 */
<link rel="stylesheet" href="more.css">

2.Sass和Less

2.1.【推薦】運算符兩側保留空格：

/* 推薦 */
.selector {width: $default-width / 2;
}

2.2.【推薦】Mixin格式規范：

/* 推薦 */
.selector {.size(30px, 20px);.clearfix();
}

2.3.【推薦】代碼組織順序：

1. @import語句
2. 全局變量聲明
3. 樣式聲明

2.4.【推薦】塊內屬性聲明順序：

1. 標準屬性
2. mixin調用
3. 嵌套選擇器

2.5.【推薦】嵌套選擇器不超過3層。

2.6.【推薦】注釋規范：

• 雙斜杠注釋編譯后會被刪除
• /**/注釋會被保留

2.7.【推薦】優先使用Mixin而非@extend。

使用 Mixin（通過 @mixin 和 @include 指令）提升代碼復用性，遵循 DRY 原則（Don’t Repeat Yourself），同時增強代碼抽象能力并降低復雜度。

不建議使用 @extend 指令，因其存在以下問題：

1. 可讀性較差，尤其在嵌套選擇器中表現尤為明顯
2. 具有潛在風險，當選擇器順序發生變化時（特別是跨文件引用時）可能導致樣式異常

雖然 @extend 相比無參數 Mixin 能減少編譯后的代碼量（避免重復輸出），但現代壓縮工具（如 gzip）能有效處理重復代碼。因此，建議優先使用 Mixin 來實現 DRY 原則。