一般格式規(guī)則
字母大小寫
僅使用小寫。
所有代碼均使用小寫，該規(guī)則適用于 CSS 選擇符、屬性和屬性值（字符串除外）。
不推薦：
color: #E5E5E5;
推薦：
color: #e5e5e5;
末尾空格
刪除行尾空格。
行尾空格屬于多余的符號(hào)，會(huì)使 diff 更加難以閱讀。
不推薦：
border: 0;__
推薦：
border: 0;
如果使用 Sublime Text，你可在用戶設(shè)置（User Settings）JSON 文件（可在文本編輯器的菜單中找到）中添加以下代碼，每當(dāng)你以此方法儲(chǔ)存文件時(shí)，去除行尾空格操作便會(huì)自動(dòng)完成：
"trim_trailing_white_space_on_save": true
縮進(jìn)
整個(gè)文件中的縮進(jìn)應(yīng)保持前后一致，使用 Tab、2個(gè)空格或4個(gè)空格都可以，但需保持前后一致。
一般元規(guī)則
編碼
使用 UTF-8（無 BOM）。
確保你的編輯器將沒有字節(jié)順序標(biāo)記的 UTF-8 用作字符編碼。不要將樣式表的編碼設(shè)置為假定的 UTF-8。
注釋
在可行和必要時(shí)，對(duì)代碼添加注釋。
用注釋解釋代碼的覆蓋范圍、目的和作用以及使用和選擇各解決方案的原因。
任務(wù)項(xiàng)
用 TODO: 標(biāo)注待辦事項(xiàng)和任務(wù)項(xiàng)：
僅用關(guān)鍵詞 TODO 標(biāo)注待辦事項(xiàng)，不要使用 @@ 等其他格式的字樣。在任務(wù)項(xiàng)前加冒號(hào)，如：TODO: action item。
推薦：
/* TODO: 添加一個(gè)按鈕元素 */
CSS 樣式規(guī)則
CSS 有效性
使用有效的 CSS。
使用有效的 CSS 是可測(cè)量的基準(zhǔn)質(zhì)量，可確保 CSS 的合理使用并有助于識(shí)別可刪除的無效 CSS 代碼。
ID 和類名稱
使用有意義或具有普遍性的 ID 和類名稱。
不可使用意義含糊的 ID 和類名稱，使用能夠反映相應(yīng)元素意義的名稱或具有普遍性的通用名。
最好使用能夠反映相應(yīng)元素意義的具體名稱，因?yàn)檫@些名稱最易于理解且不易變更。
具有普遍性的通用名被用于與類似元素意義相仿的元素，主要起輔助作用。
不推薦：
.p-998 {
…
}
.btn-green {
…
}
推薦：
.gallery {
…
}
.btn-default {
…
}
類型選擇符
避免用類型選擇器限定 ID 和類名稱。
除非情況需要（例如，在輔助類型中），否則不要將元素名和 ID 或類名稱同時(shí)使用。為提高性能，避免使用不必要的祖先選擇符。
在 CSS 文件中使用 ID 也是較糟糕的做法，類別始終比名稱更具優(yōu)勢(shì)，如果你需要給予某元素一個(gè)特殊的名稱，請(qǐng)使用類別。（ ID 的唯一優(yōu)點(diǎn)是在存在數(shù)千個(gè)類似元素的頁(yè)面上能保持較快的運(yùn)行速度。）
不推薦：
ul#example {
…
}
div.error {
…
}
推薦：
.example {
…
}
.error {
…
}
簡(jiǎn)寫屬性
應(yīng)使用簡(jiǎn)寫。
CSS 可提供多種簡(jiǎn)寫屬性（例如，padding，而不是 padding-top、padding-bottom 等），應(yīng)盡可能使用這些簡(jiǎn)寫，但字體屬性和在 Bootstrap 等框架中會(huì)覆蓋其他同名屬性的屬性除外。
使用簡(jiǎn)寫屬性有助于提高代碼的效率和易懂性。推薦在設(shè)置僅與字體 font 相關(guān)的屬性時(shí)使用字體簡(jiǎn)寫屬性，但無需在進(jìn)行小幅改動(dòng)時(shí)使用。在使用字體簡(jiǎn)寫屬性時(shí)，請(qǐng)注意，如果未注明字體的大小和系列，瀏覽器會(huì)忽略整個(gè)字體聲明。
不推薦：
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推薦：
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
0和單位
去掉 0 值后面的單位。
不推薦：
margin: 0em;
padding: 0px;
推薦：
margin: 0;
padding: 0;
前導(dǎo)零
為方便閱讀，十進(jìn)制值中含有前導(dǎo)零。
不推薦：
font-size: .8em;
推薦：
font-size: 0.8em;
十六進(jìn)制表示法
在可行時(shí)，使用三個(gè)十六進(jìn)制表示法的字符。
不推薦：
color: #eebbcc;
推薦：
color: #ebc;
ID 和類名稱分隔符
用連字符分隔 ID 和類名稱中的字詞（-）。
用連字符連接選擇符中的詞語和縮略詞，以方便理解和掃描。
唯一的例外：在編寫 BEM 樣式 CSS 選擇符時(shí)也可以使用下劃線（_）。
不推薦：
.demoimage {
…
}
.errorStatus {
…
}
推薦：
.demo-image {
…
}
.error-status {
…
}
Hack
避免用戶代理檢測(cè)或 CSS Hack ——嘗試另一種方法。
人們可能很想處理用戶代理檢測(cè)或特殊的 CSS 過濾器以及應(yīng)變方案和非法入侵之間的樣式差異。這兩項(xiàng)措施均為實(shí)現(xiàn)和維護(hù)有效和可處理的代碼庫(kù)的最后方案。請(qǐng)考慮該樣式是否對(duì)應(yīng)用的性能至關(guān)重要，需要該樣式的用戶代理是否可以不采樣該樣式。
CSS 格式規(guī)則
代碼塊內(nèi)容縮進(jìn)
縮進(jìn)所有代碼塊內(nèi)容，即規(guī)則內(nèi)的規(guī)則和聲明，以反映層次結(jié)構(gòu)、方便理解。
推薦：
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
聲明標(biāo)點(diǎn)
在所有聲明后使用分號(hào)，以增加連貫性和延展性。
不推薦：
.test {
display: block;
height: 100px
}
推薦：
.test {
display: block;
height: 100px;
}
屬性名標(biāo)點(diǎn)
所有屬性名冒號(hào)后均需添加空格，但屬性和冒號(hào)間不加空格，以增加連貫性。
不推薦：
font-weight:bold;
padding : 0;
margin :0;
推薦：
font-weight: bold;
padding: 0;
margin: 0;
聲明區(qū)標(biāo)點(diǎn)
最后一個(gè)選擇符和聲明區(qū)起始處的左大括號(hào)之間需加空格。
不推薦：
.video-block{
margin: 0;
}
.audio-block{
margin: 0;
}
推薦：
.video-block {
margin: 0;
}
.audio-block {
margin: 0;
}
選擇符和聲明分隔
所有選擇符和聲明均需另起一行。
不推薦：
h1, h2, h3 {
font-weight: normal;
line-height: 1.2;
}
推薦：
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
規(guī)則分隔
所有規(guī)則間均需加一個(gè)空行（兩個(gè)換行符）。
推薦：
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
CSS 引號(hào)
屬性選擇符和屬性值均需使用雙引號(hào)，鏈接值（ url()）中不可使用雙引號(hào)。
不推薦：
@import url("css/links.css");
html {
font-family: 'Open Sans', arial, sans-serif;
}
推薦：
@import url(css/links.css);
html {
font-family: "Open Sans", arial, sans-serif;
}
CSS 元規(guī)則
區(qū)塊注釋
在可行時(shí)，用注釋將樣式表區(qū)塊組合在一起，用新行分隔各區(qū)塊。
推薦：
/* Header */
.header {
…
}
.header-nav {
…
}
/* Content */
.gallery {
…
}
.gallery-img {
…
}
/* Footer */
.footer {
…
}
.footer-nav {
…
}
