總結(jié)本規(guī)范的目的不是大而全蓬抄，而是把我們最常用的規(guī)范總結(jié)一下圈膏，花最少的精力記住最重要的內(nèi)容倔矾。
1. 一般規(guī)范
列舉了一些可應(yīng)用在 HTML, JavaScript 和 CSS 上的通用規(guī)則驼抹。
1.1 文件/資源命名
- 文件命名以字母開頭浮还，全部小寫竟坛，單詞之間以減號(hào)（-）連接，如
my-camel-case-name.css。
（駝峰命名法用在javascript的變量及函數(shù)的命名中）
1.2 協(xié)議
-
src和url所指路徑不帶http:或https:担汤，如src="http://cdn.com/foundation.min.js"涎跨。
1.3 縮進(jìn)
- 官方（W3C）沒有給出，建議縮進(jìn)4或2個(gè)空格（不要使用tab）崭歧，與團(tuán)隊(duì)保持一致隅很。
1.4 關(guān)注點(diǎn)分離
- 嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)驾荣、行為三者分離外构，并盡量使三者之間沒有太多的交互和聯(lián)系。
就是說播掷，盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML审编，而將所有表現(xiàn)代碼，移入樣式表中歧匈；將所有動(dòng)作行為垒酬，移入腳本之中。
2. html規(guī)范
2.1 語義化標(biāo)簽
主流頁面布局
-
<header>表示頁眉,頁頭 -
<nav>表示導(dǎo)航內(nèi)容件炉； -
<section>表示文檔中的節(jié)勘究、區(qū)段，一般包含標(biāo)題和內(nèi)容斟冕； -
<article>可以看成是一種特殊類型的section元素口糕，比section更強(qiáng)調(diào)獨(dú)立性。比如blog的內(nèi)容磕蛇，報(bào)紙的文章景描。（具體區(qū)別可以查看div section 和article的區(qū)別）； -
<aside>表示article以外的內(nèi)容秀撇，而且應(yīng)該和article有一定的關(guān)系超棺，塊級(jí)元素; -
<footer>表示頁腳； -
<div>本身無特殊含義呵燕，用于布局棠绘。
另外，盡量用alt標(biāo)簽去描述圖片再扭。
HTML 標(biāo)簽的目的氧苍，是為展示內(nèi)容信息。
- 不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計(jì)問題
- 不要將 img 元素當(dāng)做專門用來做視覺設(shè)計(jì)的元素
2.2 屬性
- HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列泛范，確保代碼的易讀性候引。
-
class(首位) -
id、name data-*-
src敦跌、for、type、href -
title柠傍、alt -
aria-*麸俘、role
- id 和 class
id一般用于網(wǎng)頁大致布局，比如標(biāo)志惧笛、導(dǎo)航从媚、主體內(nèi)容、版權(quán)患整，規(guī)范命名為#logo,#nav,#content,#copyright拜效。一般項(xiàng)目中class用于css中，id被js用來操作dom且不添加樣式各谚，（jq操作的class一般不加樣式）紧憾。
class的命名原則：
- 內(nèi)容優(yōu)先，表現(xiàn)為輔
- 一律小寫昌渤，多個(gè)單詞以連字符連接
2.3 格式
- html中使用雙引號(hào)赴穗，不用單引號(hào)，如
class="news-article"膀息。 - 每一個(gè)塊狀元素般眉，列表元素和表格元素后，加上一新空白行潜支。
- 內(nèi)聯(lián)元素寫在一行內(nèi)甸赃，塊狀元素還有列表和表格要另起一行。
3. css規(guī)范
3.1 屬性聲明順序
- 顯示屬性
- 元素屬性
- 內(nèi)容屬性
/* 顯示屬性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float
/* 元素屬性 */
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 內(nèi)容屬性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
3.2 格式
- 小圖片（必須）
sprite合并 - 每個(gè)樣式屬性后加 "
;" - 屬性名的冒號(hào)后使用一個(gè)空格
- 選擇器分離和聲明分離
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
- 規(guī)則之間始終有一個(gè)空行
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
- 選擇器中避免標(biāo)簽名,如
div.subnav - 避免使用通配規(guī)則
- 規(guī)則越具體越好
盡量不要使用ul li a這樣長(zhǎng)的選擇符冗酿，最好使用.content >.content-body >.title之類的選擇符埠对。 - 省略“0”值后面的單位
- 使用小寫的十六進(jìn)制數(shù)字
在可能的情況下，使用3個(gè)字符的十六進(jìn)制表示法已烤。
3.3 css文件命名規(guī)范
主要的 master.css鸠窗；
模塊 module.css；
基本共用 base.css胯究；
布局稍计，版面layout.css；
主題 themes.css裕循；
專欄 columns.css臣嚣；
文字 font.css；
表單 forms.css剥哑；
補(bǔ)丁 mend.css硅则；
打印print.css
4. javaScript規(guī)范
4.1 命名規(guī)范
函數(shù)和變量命名采用駝峰命名法。
4.2 編碼規(guī)則
- 采用統(tǒng)一的縮進(jìn)方式排版代碼株婴；
- 關(guān)鍵詞怎虫、條件括弧后面使用空格暑认；運(yùn)算操作符號(hào)兩側(cè)使用空格；語句分割符‘,’后面使用空格大审；
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
- 左大括號(hào)"
{"可以居行尾蘸际，也可寫在下行首（獨(dú)自一行）,右大括號(hào)"}"單獨(dú)占一行，居行首徒扶； - 句末必須用分號(hào)結(jié)尾粮彤；
- 單行過長(zhǎng)應(yīng)在適當(dāng)位置予以換行,增強(qiáng)可讀性；
- if姜骡、while导坟、for、do語句的執(zhí)行體總是用"
{"和"}"括起來圈澈，即使在其結(jié)構(gòu)體內(nèi)只有一條語句惫周； - 語法意義相互獨(dú)立的代碼將用空行分隔。
錯(cuò)誤之處士败，敬請(qǐng)之處闯两，謝謝您的閱讀。
參考資料：
前端編碼規(guī)范（1）—— 一般規(guī)范
想成為前端大神,你不得不知曉的web前端命名規(guī)范谅将！
web前端規(guī)范
