前言
為什么要寫編碼規(guī)范呢敦间？我希望在一個(gè)團(tuán)隊(duì)里面能形成一種規(guī)范，小到程序編碼格式（如是否駝峰還是橫 桿洞翩，css屬性書寫時(shí)候的順序）港令，大到一個(gè)團(tuán)隊(duì)里面協(xié)調(diào)配合進(jìn)行組件開發(fā)（如模塊化、組件化編程秕磷、方便團(tuán)隊(duì)合作和修改代碼）诵闭。每個(gè)團(tuán)隊(duì)都應(yīng)該具備有這么一套規(guī)范，我通俗稱他為團(tuán)隊(duì)默契澎嚣。當(dāng)你掌握了一套編碼規(guī)范疏尿，并以之為習(xí)慣，我相信這不僅是對(duì)你編碼生涯的一個(gè)產(chǎn)生較大的影響易桃，而且還有對(duì)你的職業(yè)生涯有個(gè)美好的開端褥琐。
簡(jiǎn)要
總體分為：css篇、js篇晤郑、編碼篇敌呈。
同時(shí)提一下：遇到不懂或沒(méi)有見過(guò)的技術(shù)，請(qǐng)查閱文檔造寝，請(qǐng)查閱文檔磕洪，請(qǐng)查閱文檔，重要的事情說(shuō)三次匹舞。
前方高能〇
css篇：
css編碼設(shè)置
在編寫css的頭部添加UTF-8編碼
@charset "utf-8";
類名命名空間規(guī)范
布局：以g為命名空間褐鸥，如：g-wrap,g-header,g-content
工具：以u(píng)為命名空間线脚，表示不耦合赐稽、可復(fù)用的輔助工具叫榕，如：u-clearfix,u-ellipsis,u-text-right
組件：以m為命名空間，表示可復(fù)用姊舵、移植的組件模塊晰绎，如：m-header、m-slide括丁、m-aside-post
狀態(tài)：以s為命名空間荞下，表示動(dòng)態(tài)的、具有交互實(shí)質(zhì)的狀態(tài)（簡(jiǎn)單理解即：動(dòng)態(tài)取值）史飞，如：s-current尖昏、s-selected，s-option构资，
鉤子：以h為命名空間抽诉，表示特定給JavaScript調(diào)用的類名，只作為鉤子調(diào)用吐绵，如：h-request,h-open,h-slide
類名組合方式
統(tǒng)一小寫字母迹淌，并以橫桿（-）來(lái)鏈接，如：g-header己单，g-topbar
選擇器
當(dāng)一個(gè)規(guī)則包含多個(gè)選擇器時(shí)唉窃，每個(gè)選擇器獨(dú)占一行。
纹笼、+纹份、~、> 選擇器的兩邊各保留一個(gè)空格允乐。
如：
.g-header > .g-header-des,
.g-content ~ .g-footer {}
規(guī)則聲明塊
當(dāng)規(guī)則聲明塊中有多個(gè)樣式聲明時(shí)矮嫉，每條樣式獨(dú)占一行。
在規(guī)則聲明塊的左大括號(hào) { 前加一個(gè)空格牍疏。
在樣式屬性的冒號(hào) : 后面加上一個(gè)空格蠢笋，前面不加空格。
在每條樣式后面都以分號(hào) ; 結(jié)尾鳞陨。
規(guī)則聲明塊的右大括號(hào) } 獨(dú)占一行昨寞。
每個(gè)規(guī)則聲明間用空行分隔。
所有最外層引號(hào)使用單引號(hào) ' 厦滤。
當(dāng)一個(gè)屬性有多個(gè)屬性值時(shí)援岩，以逗號(hào) , 分隔屬性值，每個(gè)逗號(hào)后添加一個(gè)空格掏导，當(dāng)單個(gè)屬性值過(guò)長(zhǎng)時(shí)享怀，每個(gè)屬性值獨(dú)占一行。
如：
.g-footer,
.g-header {
position: relative;
}
.g-content {
background:
linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
linear-gradient(315deg, deeppink 25%, transparent 25%),
linear-gradient(45deg, deeppink 25%, transparent 25%);
}
.g-content::before {
content: '';
}
數(shù)值與單位
當(dāng)屬性值或顏色參數(shù)為 0 - 1 之間的數(shù)時(shí)趟咆，省略小數(shù)點(diǎn)前的 0 添瓷。
color: rgba(255, 255, 255, 0.5)
color: rgba(255, 255, 255, .5);
當(dāng)長(zhǎng)度值為 0 時(shí)省略單位梅屉。
margin: 0px auto
margin: 0 auto
十六進(jìn)制的顏色屬性值使用小寫和盡量簡(jiǎn)寫。
color: #ffcc00
color: #fc0
樣式屬性順序
單個(gè)樣式規(guī)則下的屬性在書寫時(shí)鳞贷，應(yīng)按功能進(jìn)行分組坯汤，
并以 Positioning Model > Box Model > Typographic > Visual 的順序書寫，
提高代碼的可讀性搀愧。如果包含 content 屬性惰聂，應(yīng)放在最前面。
因?yàn)閺呐判驈拈_頭到結(jié)尾咱筛，能影響不僅的就是model搓幌，其次是內(nèi)容排版，最好visual只是一個(gè)視覺(jué)展示迅箩。
Positioning Model (布局方式鼻种、位置，相關(guān)屬性)：position / top / right / bottom / left / z-index / display / float / ...
Box Model (盒模型沙热，相關(guān)屬性)：width / height / padding / margin / border / overflow / ...
Typographic (文本排版叉钥，相關(guān)屬性)：font / line-height / text-align / word-wrap / ...
Visual (視覺(jué)外觀，相關(guān)屬性)：color / background / list-style / transform / animation / transition / ...
排列結(jié)構(gòu)如：
Positioning Model
|
Box Model
|
Typographic
|
Visual
代碼案例如：
g-header {
position : relative ;
display：flex;
left： 100px;
margin : 0;
border : 1px solid #f0f0f0;
z-index : 100;
height ：36px;
line-height : 36px;
font-size : 14px;
color : #fff;
animation : .5s ease all;
}
合理使用使用引號(hào)
在某些樣式中篙贸，會(huì)出現(xiàn)一些含有空格的關(guān)鍵字或者中文關(guān)鍵字投队。
font-family 內(nèi)使用引號(hào)
當(dāng)字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體爵川，為了保證兼容性敷鸦，都建議在字體兩端添加單引號(hào)或者雙引號(hào)：
如果路徑里面有空格，舊版 IE 是無(wú)法識(shí)別的寝贡，會(huì)導(dǎo)致路徑失效扒披，建議不管是否存在空格，都添加上單引號(hào)或者雙引號(hào)：
body {
font-family: 'Microsoft YaHei', '黑體-簡(jiǎn)', '\5b8b\4f53';
}
background-image 的 url 內(nèi)使用引號(hào)
div {
background-image: url('...');
}
避免使用 !important
除去某些極特殊的情況圃泡，盡量不要不要使用 !important碟案。
代碼注釋
單行注釋
星號(hào)與內(nèi)容之間必須保留一個(gè)空格。
如：
/* 表格隔行變色 */
多行注釋
星號(hào)要一列對(duì)齊颇蜡，星號(hào)與內(nèi)容之間必須保留一個(gè)空格价说。
如：
/**
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
規(guī)則聲明塊內(nèi)注釋
使用 // 注釋，// 后面加上一個(gè)空格风秤，注釋獨(dú)立一行鳖目。
如：
.g-footer {
border: 0;
// ....
}
文件注釋
文件頂部必須包含文件注釋，用 @name 標(biāo)識(shí)文件說(shuō)明缤弦。星號(hào)要一列對(duì)齊领迈，星號(hào)與內(nèi)容之間必須保留一個(gè)空格，標(biāo)識(shí)符冒號(hào)與內(nèi)容之間必須保留一個(gè)空格。
如：
/**
* @name: 文件名或模塊名
* @description: 文件或模塊描述
* @author: author-name(mail-name@domain.com)
* author-name2(mail-name2@domain.com)
* @update: 2015-04-29 00:02
*/
@description為文件或模塊描述狸捅。
@update為可選項(xiàng)兵迅，建議每次改動(dòng)都更新一下。
當(dāng)該業(yè)務(wù)項(xiàng)目主要由固定的一個(gè)或多個(gè)人負(fù)責(zé)時(shí)薪贫，需要添加@author標(biāo)識(shí)，一方面是尊重勞動(dòng)成果刻恭，另一方面方便在需要時(shí)快速定位責(zé)任人瞧省。
css框架
建議使用sass或stylus框架
使用 SASS ，經(jīng)常會(huì)預(yù)先定義好一些常用公用組件類鳍贾，譬如清除浮動(dòng)鞍匾，水平垂直居中，文字 ellipsis骑科。又或者多個(gè)元素具有同樣的樣式橡淑，我們希望能夠少寫這部分代碼，公共部分抽離出來(lái)只寫一次咆爽，達(dá)到復(fù)用梁棠。
但是復(fù)用的方式在 SASS 中有多種，那么是使用單獨(dú)使用一個(gè)類定義斗埂，給需要的標(biāo)簽添加符糊，還是使用 @include 或者 @extend在定義的類中引入一個(gè) @mixin，或者一個(gè) @function 呢呛凶？
基于讓 CSS 更簡(jiǎn)潔以及代碼的復(fù)用考慮男娄，采用上面的使用 %placeholders 定義，使用 @extend 引用的方案漾稀。
- %placeholders模闲，只是一個(gè)占位符，只要不通過(guò) @extend 調(diào)用崭捍，編譯后不會(huì)產(chǎn)生任何代碼量
- 使用 @extend 引用尸折，則是因?yàn)槊看握{(diào)用相同的 %placeholders 時(shí)，編譯出來(lái)相同的 CSS 樣式會(huì)進(jìn)行合并（反之殷蛇，如果使用 @include 調(diào)用定義好的 @mixin翁授，編譯出來(lái)相同的 CSS 樣式不會(huì)進(jìn)行合并）
- 這里的組件類特指那些不會(huì)動(dòng)態(tài)改變的 CSS 樣式，注意與那些可以通過(guò)傳參生成不同數(shù)值樣式的 @mixin 方法進(jìn)行區(qū)分
元素嵌套格式
盡量避免使用標(biāo)簽名
如：
HTML：
<div class="g-content">
<ul class="g-content-list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
在給最里層的標(biāo)簽命名書寫樣式的時(shí)候晾咪，我們有兩種選擇：
.g-content {
.g-content-list {
li {
...
}
}
}
或者是
.g-content {
.g-content-list {
.item {
...
}
}
}
也就是收擦，編譯之后生成了下面這兩個(gè)，到底使用哪個(gè)好呢谍倦？
.g-content .g-content-list li { }
.g-content .g-content-list .item { }
基于 CSS 選擇器的解析規(guī)則（從右向左）塞赂，建議使用上述第二種 .g-content .g-content-list .item { } ，避免使用通用標(biāo)簽名作為選擇器的一環(huán)可以提高 CSS 匹配性能昼蛀。
瀏覽器的排版引擎解析 CSS 是基于從右向左（right-to-left）的規(guī)則宴猾，這么做是為了使樣式規(guī)則能夠更快地與渲染樹上的節(jié)點(diǎn)匹配圆存。
我覺(jué)得不同的規(guī)范都有各自的長(zhǎng)處與缺陷，對(duì)待所謂的規(guī)范最好的方式不是人云亦云仇哆，拿來(lái)就用沦辙，而是應(yīng)該結(jié)合實(shí)際情況及需求，取長(zhǎng)補(bǔ)短讹剔，取其精華去其糟粕油讯。
