CSS代碼規(guī)范
文檔
CSS 文件使用無(wú) BOM 的 UTF-8 編碼。
使用 2 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)膝捞，不允許使用 4 個(gè)空格 或 tab 字符。
每行不得超過(guò) 120 個(gè)字符愧沟，除非單行不可分割蔬咬。
當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)求泰，每個(gè)選擇器聲明必須獨(dú)占一行。
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
屬性選擇器中的值必須用雙引號(hào)包圍计盒。
不允許使用單引號(hào)渴频，不允許不使用引號(hào)。
/* good */
article[character="juliet"] {
voice-family: "Vivien Leigh", victoria, female
}
/* bad */
article[character='juliet'] {
voice-family: "Vivien Leigh", victoria, female
}
屬性定義必須另起一行北启。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)卜朗，位置靠后的限定條件應(yīng)盡可能精確。
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
在可以使用縮寫的情況下咕村，盡量使用屬性縮寫场钉。
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
屬性書寫順序
同一 rule set 下的屬性在書寫時(shí)，應(yīng)按功能進(jìn)行分組懈涛，并以 Formatting Model（布局方式逛万、位置） > Box Model（尺寸） > Typographic（文本相關(guān)） > Visual（視覺(jué)效果） 的順序書寫，以提高代碼的可讀性批钠。
- Formatting Model 相關(guān)屬性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model 相關(guān)屬性包括：border / margin / padding / width / height 等
- Typographic 相關(guān)屬性包括：font / line-height / text-align / word-wrap 等
- Visual 相關(guān)屬性包括：background / color / transition / list-style 等
另外宇植，如果包含 content 屬性，應(yīng)放在最前面埋心。
.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;
}
清除浮動(dòng)
當(dāng)元素需要撐起高度以包含內(nèi)部的浮動(dòng)元素時(shí)指郁，通過(guò)對(duì)偽類設(shè)置 clear 或觸發(fā) BFC 的方式進(jìn)行 clearfix。盡量不使用增加空標(biāo)簽的方式拷呆。
觸發(fā) BFC 的方式很多闲坎，常見(jiàn)的有：
- float 非 none
- position 非 static
- overflow 非 visible
.clear:before,
.clear:after{
content: " ";
display: table;
}
.clear:after{
clear: both;
}
盡量不使用 !important 聲明。
必須注意的是茬斧，僅在設(shè)計(jì)上 確實(shí)不允許任何其它場(chǎng)景覆蓋樣式 時(shí)腰懂，才使用內(nèi)聯(lián)的 !important 樣式。通常在第三方插件環(huán)境的應(yīng)用中使用這種方案项秉。
url() 函數(shù)中的路徑不加引號(hào)绣溜。
RGB顏色值必須使用十六進(jìn)制記號(hào)形式 #rrggbb。不允許使用 rgb()伙狐。帶有alpha的顏色信息可以使用 rgba()涮毫。使用 rgba() 時(shí)每個(gè)逗號(hào)后必須保留一個(gè)空格。
顏色值可以縮寫時(shí)贷屎，必須使用縮寫形式罢防。
顏色值不允許使用命名色值。
顏色值中的英文字符采用小寫唉侄。
必須同時(shí)給出水平和垂直方向的位置咒吐。
2D 位置初始值為 0% 0%，但在只有一個(gè)方向的值時(shí)，另一個(gè)方向的值會(huì)被解析為 center恬叹。為避免理解上的困擾候生，應(yīng)同時(shí)給出兩個(gè)方向的值。
/* good */
body {
background-position: center top; /* 50% 0% */
}
/* bad */
body {
background-position: top; /* 50% 0% */
}
字體族
font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name绽昼，其中如有空格唯鸭，須放置在引號(hào)中。
所謂英文 Family Name硅确，為字體文件的一個(gè)元數(shù)據(jù)目溉，常見(jiàn)名稱如下：
| 字體 | 操作系統(tǒng) | Family Name |
|---|---|---|
| 宋體 (中易宋體) | Windows | SimSun |
| 黑體 (中易黑體) | Windows | SimHei |
| 微軟雅黑 | Windows | Microsoft YaHei |
| 微軟正黑 | Windows | Microsoft JhengHei |
| 華文黑體 | Mac/iOS | STHeiti |
| 冬青黑體 | Mac/iOS | Hiragino Sans GB |
| 文泉驛正黑 | Linux | WenQuanYi Zen Hei |
| 文泉驛微米黑 | Linux | WenQuanYi Micro Hei |
h1 {
font-family: "Microsoft YaHei";
}
font-family 按「西文字體在前、中文字體在后」菱农、「效果佳 (質(zhì)量高/更能滿足需求) 的字體在前缭付、效果一般的字體在后」的順序編寫，最后必須指定一個(gè)通用字體族( serif / sans-serif )循未。
需要在 Windows 平臺(tái)顯示的中文內(nèi)容陷猫，其字號(hào)應(yīng)不小于 12px。
font-weight 屬性必須使用數(shù)值方式描述的妖。
CSS 的字重分 100 – 900 共九檔绣檬，但目前受字體本身質(zhì)量和瀏覽器的限制，實(shí)際上支持 400 和 700 兩檔羔味，分別等價(jià)于關(guān)鍵詞 normal 和 bold河咽。
line-height 在定義文本段落時(shí)，應(yīng)使用數(shù)值赋元。
將 line-height 設(shè)置為數(shù)值，瀏覽器會(huì)基于當(dāng)前元素設(shè)置的 font-size 進(jìn)行再次計(jì)算飒房。在不同字號(hào)的文本段落組合中搁凸，能達(dá)到較為舒適的行間間隔效果，避免在每個(gè)設(shè)置了 font-size 都需要設(shè)置 line-height狠毯。
.container {
line-height: 1.5;
}
屬性前綴
帶私有前綴的屬性由長(zhǎng)到短排列护糖。
Hack
需要添加 hack 時(shí)應(yīng)盡可能考慮是否可以采用其他方式解決。
盡量使用 選擇器 hack 處理兼容性嚼松，而非 屬性 hack嫡良。
盡量使用簡(jiǎn)單的 屬性 hack
.coldCity .top {
top: 24px;
top: 24px\0; /*ie9-11*/
top/*\**/: 26px\9; /*ie8*/
}
