1.項(xiàng)目蜕煌、目錄及文件命名
1.1 全部采用小寫方式乏苦， 以下劃線分隔六荒。
- 項(xiàng)目命名： 用項(xiàng)目對應(yīng)的英文單詞命名。例：my_project_name
- 目錄命名： 有復(fù)數(shù)結(jié)構(gòu)時(shí)蝗砾，要采用復(fù)數(shù)命名法终蒂。例：scripts, styles, images, data_models
- HTML文件命名： 例：login.html, error_report.html
- CSS, SCSS文件命名： 例：base.css, pagename.css
- JS文件命名： 例：jquery.2.2.3.min.js, pagename.js
2.HTML
2.1 語法
- 縮進(jìn)使用soft tab（4個(gè)空格）
- 嵌套的節(jié)點(diǎn)應(yīng)當(dāng)縮進(jìn)一次
- 在屬性的定義上，使用雙引號遥诉，不要使用單引號
- 屬性名全小寫拇泣，用中劃線做分隔符
- 不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線
- 不要忽略可選的關(guān)閉標(biāo)簽，例： </li> 和 </body>
2.2 HTML5 doctype矮锈、lang屬性霉翔、字符編碼、IE兼容模式
- 在頁面開頭使用這個(gè)簡單地 doctype 來啟用標(biāo)準(zhǔn)模式苞笨，使其在每個(gè)瀏覽器中盡可能一致的展現(xiàn)
- 建議為 html 根元素指定 lang 屬性债朵，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音瀑凝，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等序芦。
- 通過聲明一個(gè)明確的字符編碼，讓瀏覽器快速的確定適合網(wǎng)頁內(nèi)容的渲染方式粤咪，通常指定為'UTF-8'谚中。
- IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。最好是設(shè)置為 edge mode 寥枝，從而通知 IE 采用其所支持的最新的模式宪塔。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
</html>
2.3 引入css,js文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性囊拜，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值某筐。
<!-- External CSS -->
<link rel="stylesheet" href="main.css">
<!-- External JS -->
<script src="main.js"></script>
2.4 屬性順序、boolean屬性
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class 用于標(biāo)識高度可復(fù)用組件冠跷，所以應(yīng)處在第一位南誊；
id 更加具體且應(yīng)該盡量少使用身诺，所以將它放在第二位。
boolean屬性指不需要聲明取值的屬性抄囚，XHTML需要每個(gè)屬性聲明取值霉赡，但是HTML5并不需要；
boolean屬性的存在表示取值為true怠苔，不存在則表示取值為false同廉。例：<input type="checkbox" value="1" checked>
2.5 JS生成標(biāo)簽仪糖、減少標(biāo)簽數(shù)量
在JS文件中生成標(biāo)簽讓內(nèi)容變得更難查找柑司，更難編輯，性能更差锅劝。應(yīng)該盡量避免這種情況的出現(xiàn)攒驰。
編寫 HTML 代碼時(shí)，盡量避免多余的父元素故爵。很多時(shí)候玻粪，這需要迭代和重構(gòu)來實(shí)現(xiàn)。
3.CSS, SCSS
3.1 語法
- 縮進(jìn)诬垂，使用soft tab（4個(gè)空格）劲室。
- 為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行结窘。
- 為了代碼的易讀性很洋，在每個(gè)聲明塊的左花括號前添加一個(gè)空格。
- 聲明塊的右花括號應(yīng)當(dāng)單獨(dú)成行隧枫。
- 每條聲明語句的 : 后應(yīng)該插入一個(gè)空格喉磁。
- 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告，每條聲明都應(yīng)該獨(dú)占一行官脓。
- 所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾协怒。
- 對于以逗號分隔的屬性值，每個(gè)逗號后面都應(yīng)該插入一個(gè)空格（例如卑笨，box-shadow）孕暇。
- 不要在 rgb()、rgba()赤兴、hsl()芭商、hsla() 或 rect() 值的內(nèi)部的逗號后面插入空格。這樣利于從多個(gè)屬性值（既加逗號也加空格）中區(qū)分多個(gè)顏色值（只加逗號搀缠，不加空格）铛楣。
- 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如艺普，.5 代替 0.5簸州；-.5px 代替 -0.5px）鉴竭。
- 十六進(jìn)制值應(yīng)該全部小寫，例如岸浑，#fff搏存。在掃描文檔時(shí)，小寫字符易于分辨矢洲，因?yàn)樗麄兊男问礁子趨^(qū)分璧眠。
- 盡量使用簡寫形式的十六進(jìn)制值，例如读虏，用 #fff 代替 #ffffff责静。
- 為選擇器中的屬性添加雙引號，例如盖桥，input[type="text"]灾螃。只有在某些情況下是可選的，但是揩徊，為了代碼的一致性腰鬼，建議都加上雙引號。
- 避免為 0 值指定單位塑荒，例如熄赡，用 margin: 0; 代替 margin: 0px;。
/* 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;
}
3.2 屬性聲明順序
- Positioning（定位齿税，如position彼硫，top，z-index）
- Box model（盒模型偎窘，如display乌助，box-sizing，width陌知，border）
- Typographic（排版他托，如font，line-height仆葡，text-align）
- Visual（視覺赏参，如background，color,opacity）
- Other（其他沿盅，如cursor）
3.3 選擇器
- 對于通用元素使用 class 把篓，這樣利于渲染性能的優(yōu)化。
- 對于經(jīng)常出現(xiàn)的組件腰涧，避免使用屬性選擇器（例如韧掩，[class^="..."]）。瀏覽器的性能會受到這些因素的影響
- 選擇器要盡可能短窖铡，并且盡量限制組成選擇器的元素個(gè)數(shù)疗锐，建議不要超過 3
4.JavaScript
4.1 命名規(guī)則
變量命名：
- 駝峰式命名坊谁。前綴應(yīng)當(dāng)是名詞。(函數(shù)的名字前綴為動(dòng)詞滑臊，以此區(qū)分變量和函數(shù))
- 盡量在變量名字中體現(xiàn)所屬類型口芍，如:length、count等表示數(shù)字類型雇卷；而包含name鬓椭、title表示為字符串類型
- 常量全大寫，用下劃線連接
- 構(gòu)造函數(shù)关划，大寫第一個(gè)字母
- jquery對象必須以'$'開頭命名
var firstName = "John";
var MAX_COUNT = 10;
var $body = $('body');
函數(shù)命名：
- 前綴應(yīng)當(dāng)為動(dòng)詞小染。命名建議：可使用常見動(dòng)詞約定
| 動(dòng)詞 | 含義 |
|---|---|
| can | 判斷是否可執(zhí)行某個(gè)動(dòng)作(權(quán)限) |
| has | 判斷是否含有某個(gè)值 |
| is | 判斷是否為某個(gè)值 |
| get | 獲取某個(gè)值 |
| set | 設(shè)置某個(gè)值 |
| load | 加載某些數(shù)據(jù) |
4.2 函數(shù)
- 無論是函數(shù)聲明還是函數(shù)表達(dá)式，'('前不要空格祭玉，但'{'前一定要有空格
- 函數(shù)調(diào)用括號前不需要空格
- 立即執(zhí)行函數(shù)外必須包一層括號
- 不要給inline function命名
- 參數(shù)之間用', '分隔氧映，注意逗號后有一個(gè)空格
4.3 數(shù)組春畔、對象
- 對象屬性名不需要加引號脱货；
- 冒號與屬性值間有個(gè)空格。
- 對象以縮進(jìn)的形式書寫律姨，不要寫在一行振峻；
- 數(shù)組、對象最后不要有逗號择份。
- 字符串使用雙引號扣孟，數(shù)字不需要。
4.4 注意事項(xiàng)
- JS 縮進(jìn)荣赶，使用soft tab（4個(gè)空格）
- 通常運(yùn)算符 ( = + - * / ) 前后需要添加空格
- 結(jié)束行需添加分號
; - 盡量選用局部變量而不是全局變量
- 盡量減少DOM調(diào)用
- 將js腳本放到頁面底部
- 使用jquery的data來存取數(shù)據(jù)凤价，減少對dom的操作
- 使用on方法綁定事件，這是jquery的推薦使用
- 選擇器的選擇：盡量不用標(biāo)簽選擇器拔创，能用ID選擇器的就不用class選擇器
