前言
統(tǒng)一的編碼規(guī)范蹋盆，有助于編寫(xiě)高質(zhì)量、可讀性強(qiáng)硝全、易于維護(hù)的代碼栖雾。
CSS 代碼的編寫(xiě)，應(yīng)該盡量簡(jiǎn)潔伟众、高性能析藕、高可維護(hù)性，達(dá)到三者的一個(gè)最佳平衡凳厢。不能為了簡(jiǎn)潔犧牲可維護(hù)性账胧。
本文引自：編碼規(guī)范 by @mdo
黃金定律
不管有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫(xiě)的先紫。
一治泥、語(yǔ)法
- 用兩個(gè)空格來(lái)代替 tab
- 單獨(dú)的選擇器單獨(dú)放在一行
- 左花括號(hào)前添加一個(gè)空格
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行
-
:后插入一個(gè)空格 - 每條聲明都應(yīng)該獨(dú)占一行
- 所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾
- 以逗號(hào)分隔的屬性值，逗號(hào)后面插入一個(gè)空格
- 不要在
rgb()遮精、rgba()居夹、hsl()、hsla()或rect()值的內(nèi)部的逗號(hào)后面插入空格本冲。這樣利于從多個(gè)屬性值（既加逗號(hào)也加空格）中區(qū)分多個(gè)顏色值（只加逗號(hào)准脂，不加空格）。 -
.5代替0.5眼俊；-.5px代替-0.5px - 十六進(jìn)制值應(yīng)該全部小寫(xiě)
- 盡量使用簡(jiǎn)寫(xiě)形式的十六進(jìn)制值
- 為選擇器中的屬性添加雙引號(hào)
- 避免為 0 值指定單位
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
二意狠、屬性聲明
2.1 順序
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組，并按照下面的順序排列：
- 定位
- 盒模型
- 版式
- 視覺(jué)
由于定位可以從正常的文檔流中移除元素疮胖，并且還能覆蓋盒模型相關(guān)的樣式环戈，因此排在首位。盒模型排在第二位澎灸，因?yàn)樗鼪Q定了組件的尺寸和位置院塞。
其他屬性只是影響組件的內(nèi)部或者是不影響前兩組屬性，因此排在后面性昭。
.declaration-order {
/* 定位 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型 */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
box-sizing: border-box;
/* 版式 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* 視覺(jué) */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: 0 0 10px #000;
/* 雜項(xiàng) */
opacity: 1;
}
2.2 簡(jiǎn)寫(xiě)形式的屬性聲明
在需要顯示地設(shè)置所有值的情況下拦止，應(yīng)當(dāng)盡量限制使用簡(jiǎn)寫(xiě)形式的屬性聲明。
- padding
- margin
- font
- background
- border
- border-radius
大部分情況下，我們不需要為簡(jiǎn)寫(xiě)形式的屬性聲明指定所有值汹族。例如 header 元素只需要設(shè)置上萧求、下邊距的值，因此顶瞒，在必要的時(shí)候夸政，只需覆蓋這兩個(gè)值就可以。
過(guò)度使用簡(jiǎn)寫(xiě)形式的屬性聲明
- 導(dǎo)致代碼混亂
- 對(duì)屬性值帶來(lái)不必要的覆蓋從而引起意外的副作用
- 重新的渲染造成瀏覽器資源的消耗
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
2.3 帶前綴的屬性
當(dāng)使用特定廠商的帶有前綴的屬性時(shí)榴徐，通過(guò)縮進(jìn)的方式守问，讓每個(gè)屬性的值在垂直方向?qū)R，這樣便于多行編輯坑资。
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
2.4 單行規(guī)則聲明
對(duì)于只包含一條聲明的樣式耗帕，為了易讀性和便于快速編輯，建議將語(yǔ)句放在同一行袱贮。對(duì)于帶有多條聲明的樣式仿便，還是應(yīng)當(dāng)將聲明分為多行。
/* Single declarations on one line */
.span1 { width: 60px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
2.5 媒體查詢（Media query）的位置
將媒體查詢盡可能放在相關(guān)規(guī)則的附近字柠。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部探越。如果你把他們分開(kāi)了，將來(lái)只會(huì)被大家遺忘窑业。
三钦幔、class 命名
- class 名稱中只能出現(xiàn)小寫(xiě)字符和破折號(hào)，破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名
- 避免過(guò)度任意的簡(jiǎn)寫(xiě)
- class 名稱應(yīng)當(dāng)盡可能短常柄，并且意義明確
- 使用有意義的名稱鲤氢。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式的名稱
- 基于最近的父 class 或基本 class 作為新 class 的前綴
- 使用
.js-*class 來(lái)標(biāo)識(shí)行為（與樣式相對(duì)）西潘，并且不要將這些 class 包含到 CSS 文件中
四卷玉、選擇器
- 對(duì)于通用元素使用 class ，這樣利于渲染性能的優(yōu)化喷市。
- 對(duì)于經(jīng)常出現(xiàn)的組件相种，避免使用屬性選擇器
- 選擇器要盡可能短，并且盡量限制組成選擇器的元素個(gè)數(shù)品姓，建議不要超過(guò) 3
- 只有在必要的時(shí)候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）
五寝并、代碼組織
- 以組件為單位組織代碼段
- 制定一致的注釋規(guī)范
- 使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔
- 如果使用了多個(gè) CSS 文件腹备，將其按照組件而非頁(yè)面的形式分拆衬潦，因?yàn)轫?yè)面會(huì)被重組，而組件只會(huì)被移動(dòng)
5.1 不要使用原生 @import
與 <link> 標(biāo)簽相比植酥，@import 指令要慢很多镀岛，不光增加了額外的請(qǐng)求次數(shù)弦牡，還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題。
- 使用 Sass 或 Less 等 CSS 預(yù)處理器的
@import指令漂羊，將多個(gè) CSS 文件編譯為一個(gè)文件 - 通過(guò) Rails驾锰、Jekyll 或其他系統(tǒng)中提供過(guò) CSS 文件合并功能
六、注釋
確保你的代碼能夠自描述走越、注釋良好并且易于他人理解稻据，可以很大程度地提高可維護(hù)性。
好的代碼注釋能夠傳達(dá)上下文關(guān)系和代碼目的买喧。不要簡(jiǎn)單地重申組件或 class 名稱。
對(duì)于較長(zhǎng)的注釋匆赃，務(wù)必書(shū)寫(xiě)完整的句子淤毛；對(duì)于一般性注解，可以書(shū)寫(xiě)簡(jiǎn)潔的短語(yǔ)算柳。
八低淡、Less 和 Sass
8.1 操作符
為了提高可讀性，在圓括號(hào)中的數(shù)學(xué)計(jì)算表達(dá)式的數(shù)值瞬项、變量和操作符之間均添加一個(gè)空格蔗蹋。
8.2 嵌套
避免不必要的嵌套。這是因?yàn)殡m然你可以使用嵌套囱淋，但是并不意味著應(yīng)該使用嵌套猪杭。只有在必須將樣式限制在父元素內(nèi)（也就是后代選擇器），并且存在多個(gè)需要嵌套的元素時(shí)才使用嵌套妥衣。
九皂吮、編輯器配置
將你的編輯器按照下面的配置進(jìn)行設(shè)置，以避免常見(jiàn)的代碼不一致和差異：
- 用兩個(gè)空格代替制表符（soft-tab 即用空格代表 tab 符）税手。
- 保存文件時(shí)蜂筹，刪除尾部的空白符。
- 設(shè)置文件編碼為 UTF-8芦倒。
- 在文件結(jié)尾添加一個(gè)空白行艺挪。
將這些配置信息添加到項(xiàng)目的 .editorconfig 文件中
