相關(guān)文章
博客原文
我的前端規(guī)范——開篇
我的前端規(guī)范——HTML篇
我的前端規(guī)范——CSS篇
我的前端規(guī)范——JavaScript篇
大綱
前言
1行您、常用語(yǔ)義化標(biāo)簽
2枫疆、元素中屬性
3闷沥、元素中屬性的命名規(guī)范
4、文檔聲明
前言
規(guī)范對(duì)于一個(gè)項(xiàng)目來(lái)說(shuō)是很重要的该酗，統(tǒng)一的規(guī)范對(duì)代碼的一致性逸爵、項(xiàng)目的質(zhì)量具滴、工作的協(xié)調(diào)都有很大的幫助，而且有時(shí)候可以規(guī)避很多意料不到的錯(cuò)誤师倔。
當(dāng)然构韵，規(guī)范是死的，人是活的趋艘。我總結(jié)的前端規(guī)范是我認(rèn)為對(duì)我來(lái)說(shuō)比較適合的贞绳，我又認(rèn)可的，所以我能比較好的接受和使用致稀。但是冈闭，不同的團(tuán)隊(duì)，不同的項(xiàng)目需要遵守的規(guī)范也許就是不一樣的抖单。規(guī)范的作用是讓項(xiàng)目的代碼看起來(lái)更有統(tǒng)一性萎攒，讓團(tuán)隊(duì)的協(xié)作更方便，因此矛绘，根據(jù)具體的情況制定統(tǒng)一的規(guī)范才是最合理的耍休，而這里我給出的也只是我認(rèn)為比較符合我風(fēng)格和習(xí)慣的，至于具體的規(guī)范還是要依據(jù)具體的情況來(lái)總結(jié)制定货矮。
單獨(dú)寫成一篇的話篇幅很大羊精，因此我會(huì)將我的總結(jié)寫成：開篇、css囚玫、html喧锦、js四篇读规，讓有需要的讀者能夠更方便的查找到想要的知識(shí)。
1燃少、常用語(yǔ)義化標(biāo)簽
section： 表示文檔中的節(jié)束亏、區(qū)段，可以和h1-h6一起來(lái)顯示文檔結(jié)構(gòu)（元素代表文檔中的“節(jié)”或“段”阵具，“段”可以是指一篇文章里按照主題的分段碍遍；“節(jié)”可以是指一個(gè)頁(yè)面里的分組。）
article： 表示一塊比較獨(dú)立的內(nèi)容或者主題內(nèi)容阳液，塊級(jí)元素怕敬，比如blog的內(nèi)容，報(bào)紙的文章（代表一個(gè)在文檔帘皿，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容东跪，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。article內(nèi)嵌article可能是用來(lái)表示該文檔的評(píng)論矮烹。）
aside ： 表示article以外的內(nèi)容越庇，而且應(yīng)該和article有一定的關(guān)系罩锐，塊級(jí)元素（元素被包含在article元素中作為主要內(nèi)容的附屬信息部分奉狈，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽涩惑、名次解釋等仁期。（特殊的section），也可用作側(cè)邊欄）
hgroup ： 表示一個(gè)文檔竭恬、區(qū)段(section)的標(biāo)題組合（表示網(wǎng)頁(yè)或者section的標(biāo)題跛蛋，當(dāng)某塊內(nèi)容中有多塊內(nèi)容的時(shí)候，就可以分別用h1痊硕、h2赊级、h3來(lái)組合。）
header ： 表示頁(yè)眉,頁(yè)頭(表示的是網(wǎng)頁(yè)或者section的頭部岔绸，一個(gè)頁(yè)面可以有多塊內(nèi)容理逊，每塊內(nèi)容都可以有自己的頭部，不過(guò)一般在整體的時(shí)候設(shè)置一個(gè)頭部盒揉，并且以h1等標(biāo)簽來(lái)語(yǔ)義化這個(gè)頁(yè)面的標(biāo)題晋被，從而方便搜索引擎查找。如果hgroup刚盈、h1羡洛、 h2自己能工作好，就可以不需要這個(gè)藕漱。)
footer ： 表示頁(yè)腳（表示網(wǎng)頁(yè)或者section的底部欲侮，通常含有某塊內(nèi)容的基本信息崭闲，如作者、文檔鏈接锈麸、版權(quán)等相關(guān)信息）
nav ： 表示導(dǎo)航內(nèi)容（代表頁(yè)面的導(dǎo)航鏈接區(qū)域镀脂，用于定義頁(yè)面的主要導(dǎo)航部分。）
figure ： 表示以相對(duì)獨(dú)立的或外引的元素忘伞，如img video
figcaption： 表示 figure內(nèi)容的標(biāo)題
2薄翅、元素中屬性
2.1、HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列氓奈，確保代碼的易讀性翘魄。
class
id 、 name
data-*
src舀奶、for暑竟、 type、 href
title育勺、alt
aria-*但荤、 role
- 2、class用于標(biāo)識(shí)高度可復(fù)用組件,id 用于標(biāo)識(shí)具體組件涧至，應(yīng)當(dāng)謹(jǐn)慎使用（例如腹躁，頁(yè)面內(nèi)的書簽）。
3南蓬、元素中屬性的命名規(guī)范
3.1纺非、class、id命名
全部用小寫的英文單詞赘方，單詞之間用“-”連接烧颖。盡量規(guī)避數(shù)字、拼音以及可能被攔截的單詞命名窄陡，如： ad炕淮、ads、adv跳夭、banner涂圆、sponsor、gg优妙、guangg乘综、guanggao
注意語(yǔ)義化單詞的使用
id 和 class 的命名基本原則: 內(nèi)容優(yōu)先，表現(xiàn)為輔——即：結(jié)構(gòu)+內(nèi)容+表示方面（哪方面內(nèi)容）.
3.2套硼、name命名
英文單詞的駝峰法命名
3.3卡辰、class、id、name命名中需要注意的九妈。
在不影響語(yǔ)意的情況下反砌，id 和 class 的名稱 可以適當(dāng)使用縮寫，如: col, nav, hd, bd, fd( 縮寫只用來(lái)表示結(jié)構(gòu)萌朱，不允許寫任何樣式)宴树。不要自造縮寫。
id 和 class 的選擇晶疼，如果只使用一次酒贬，使用id,如果使用多次使用class。
4、文檔聲明
4.1、為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明寝受，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html>
4.2零如、IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求锄弱，否則最好是設(shè)置為 edge mode考蕾，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
