為了編寫出更高可讀性父款，結(jié)構(gòu)更加清晰且冗余較少的代碼浅役，前端工程師們總結(jié)出了一些前端的編碼規(guī)范斩松，它們涵蓋了前端的所有部分伶唯，包括HTML觉既、CSS和JS，以下也是圍繞這三個(gè)方面，對(duì)這些前端代碼的編碼規(guī)范做一個(gè)大致的復(fù)習(xí)和鞏固瞪讼。
一钧椰、HTML的編碼規(guī)范
- 首當(dāng)其沖的自然就是
<!DOCTYPE html>，文檔類型聲明符欠。在不同的時(shí)期嫡霞，<!DOCTYPE html>的寫法有所不同，但它最重要的功能對(duì)文檔的類型進(jìn)行聲明卻從未更改希柿，如果不添加該聲明诊沪，瀏覽器渲染時(shí)會(huì)以怪異模式進(jìn)行文檔渲染。
文檔類型聲明
- 語言類型和編碼類型要寫曾撤，他們通常的寫法如下：（語言類型寫在根節(jié)點(diǎn)
<html>上端姚，編碼類型寫在<meta>便簽里）：
語言類型和編碼類型
- JS引入寫在
<body>標(biāo)簽的最后可有效防止因?yàn)镴S文件加載不出來而導(dǎo)致的白屏問題：
JS腳本引入的書寫位置
- 注重html的語義化，使用相應(yīng)內(nèi)容的標(biāo)簽：以下是推薦和不推薦的寫法
語義化
- 友好的圖片挤悉，盡量寫
<img>標(biāo)簽alt和title屬性渐裸，alt屬性用于圖片掛掉時(shí)對(duì)圖片內(nèi)容進(jìn)行提示，title用于鼠標(biāo)浮于圖片上時(shí)進(jìn)行內(nèi)容提示（裝飾性的圖片無需填寫装悲，用于省字符數(shù)）
title屬性作用
alt圖片內(nèi)容提示
- H5引入CSS和JS時(shí)可以不寫type屬性昏鹃，style標(biāo)簽?zāi)J(rèn)type是CSS文件，script標(biāo)簽type默認(rèn)是JS文件
引入外鏈
- 引號(hào)問題诀诊，在HTML中的書寫盡量使用雙引號(hào)
""洞渤，少使用單引號(hào)''，這點(diǎn)也要看公司的規(guī)定而言属瓣，但是引號(hào)的使用要統(tǒng)一您宪，不要一下單引號(hào)一下雙引號(hào)：
不推薦的引號(hào)用法
- H5中，空白元素標(biāo)簽如
link,meta,img,br,hr,input等奠涌，在結(jié)尾不需要添加/符號(hào)進(jìn)行結(jié)束
空白標(biāo)簽的結(jié)束不需要'/'
- 其它：1宪巨、注意嵌套標(biāo)簽的結(jié)束；2溜畅、JS和CSS盡量使用外鏈捏卓，有助于樣式與內(nèi)容的分離；3慈格、盡量書寫注釋對(duì)HTML內(nèi)容結(jié)構(gòu)進(jìn)行梳理怠晴；
二、CSS編碼規(guī)范
- CSS書寫的順序
1.位置相關(guān)（position浴捆，float蒜田，display，top选泻，right等）冲粤；
2.盒模型相關(guān)（width美莫，height，margin梯捕，padding等）厢呵；
3.字體相關(guān)（size，color傀顾，family襟铭，line-height等）；
4.背景和邊框（background短曾，border）寒砖；
5.其它（transition等）；
正確順序
- 盡量使用CSS縮寫精簡(jiǎn)代碼（字體嫉拐，邊框入撒，內(nèi)/外邊距等）
CSS樣式縮寫
- 選擇器與后面的'{'要有一個(gè)空格，樣式屬性與值之間要有一個(gè)空格
空格
- 多個(gè)選擇器同時(shí)用時(shí)要有換行
多選擇器之間換行
- 0不需要加單位椭岩，0.n的單位不需要寫0
單位書寫
- 使用16進(jìn)制顏色時(shí)茅逮，當(dāng)每?jī)晌幌嗤目梢赃M(jìn)行縮寫
顏色縮寫
- 其它：1、每條樣式用
;進(jìn)行結(jié)尾判哥；2献雅、樣式要進(jìn)行縮進(jìn)；3塌计、盡量避免使用標(biāo)簽選擇器挺身，可以使用子選擇器和兄弟選擇器；
三锌仅、JS書寫規(guī)范
- 變量聲明用
var章钾，多個(gè)變量命名可以用一個(gè)var，然后用逗號(hào),進(jìn)行分隔：
變量命名
- 變量盡量寫在變量聲明中：
變量書寫
- 立即執(zhí)行函數(shù)書寫：盡量將整個(gè)函數(shù)包裹在括號(hào)內(nèi)：
立即執(zhí)行函數(shù)書寫
- 每個(gè)獨(dú)立語句用
;進(jìn)行結(jié)束：
用分號(hào)進(jìn)行語句結(jié)束
- 其它規(guī)范：1热芹、注意函數(shù)內(nèi)部的縮進(jìn)贱傀；2、盡量編寫注釋伊脓；3府寒、格式對(duì)齊以及縮進(jìn)；
四报腔、命名規(guī)則
CSS選擇器的命名規(guī)則
1.命名用英文小寫字母書寫株搔；
2.命名體現(xiàn)出內(nèi)容、功能或者樣式(樣式命名少用)纯蛾，注重語義化纤房；
3.多個(gè)單詞的命名使用中橫線-進(jìn)行連接；
4.id選擇器在HTML中只在大區(qū)塊上進(jìn)行添加翻诉，盡量少用炮姨，其它可使用類選擇器捌刮；
5.命名如果采用縮寫要使人能看懂，不要使用無意義的命名剑令；
6.屬性的值要用雙引號(hào)括起來，如：class = "nav";拄查；JS的命名
1.命名采用駝峰式命名吁津，第一個(gè)單詞小寫，后面的單詞首字母大寫堕扶；
2.函數(shù)的命名使用動(dòng)詞碍脏，或者動(dòng)詞+名詞的形式；
- CSS選擇器常用命名參考
常用的CSS命名規(guī)則
五稍算、總結(jié)
1.做到語義化典尾，方便閱讀和優(yōu)化；
2.代碼盡量簡(jiǎn)單糊探，結(jié)構(gòu)明晰钾埂，冗余少；
3.注意書寫注釋科平；
4.注意健壯性和可復(fù)用性褥紫；
文章著作權(quán)歸饑人谷_大春和饑人谷所有，轉(zhuǎn)載須說明來源
