Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
我要評(píng)論前言
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行編碼規(guī)范的話，錯(cuò)誤就會(huì)變得更加顯而易見。如果一段特定的代碼不符合規(guī)范的話，它有可能只是代碼風(fēng)格錯(cuò)誤，而也有可能會(huì)是 bug。早期指定規(guī)范就使得代碼審核得以更好的開展，并且可以更精確的地定位到錯(cuò)誤。只要開發(fā)者們能夠保證源代碼源文件都嚴(yán)格遵循規(guī)范，那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同。
要講的依次為：
- 前端編碼規(guī)范（1）—— 一般規(guī)范
- 前端編碼規(guī)范（2）—— HTML規(guī)范
- 前端編碼規(guī)范（3）—— JavaScript規(guī)范
- 前端編碼規(guī)范（4）—— CSS規(guī)范
一般規(guī)范
以下章節(jié)列舉了一些可應(yīng)用在 HTML, JavaScript 和 CSS/SCSS 上的通用規(guī)則。
文件/資源命名
- 使用點(diǎn)分隔符(.)來區(qū)分文件名中帶有清晰意義的元數(shù)據(jù)（如 .min.js, .min.css）
- 使用減號(hào)(-)是用來分隔文件名(如 big-black-background.jpg)
- 文件命名總是以字母開頭而不是數(shù)字
- 資源的字母名稱必須全為小寫
在 web 項(xiàng)目中，所有的文件名應(yīng)該都遵循同一命名約定。以可讀性而言，減號(hào)（-）是用來分隔文件名的不二之選。同時(shí)它也是常見的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所當(dāng)然的，減號(hào)應(yīng)該也是用來分隔資源名稱的好選擇。
請(qǐng)確保文件命名總是以字母開頭而不是數(shù)字。而以特殊字符開頭命名的文件，一般都有特殊的含義與用處（比如 compass[1] 中的下劃線就是用來標(biāo)記跳過直接編譯的文件用的）。
資源的字母名稱必須全為小寫，這是因?yàn)樵谀承?duì)大小寫字母敏感的操作系統(tǒng)中，當(dāng)文件通過工具壓縮混淆后，或者人為修改過后，大小寫不同而導(dǎo)致引用文件不同的錯(cuò)誤，很難被發(fā)現(xiàn)。
還有一些情況下，需要對(duì)文件增加前后綴或特定的擴(kuò)展名（比如 .min.js, .min.css），抑或一串前綴（比如 3fa89b.main.min.css）。這種情況下，建議使用點(diǎn)分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。
不推薦
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
推薦
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
協(xié)議
不要指定引入資源所帶的具體協(xié)議。
當(dāng)引入圖片或其他媒體文件，還有樣式和腳本時(shí)，URLs 所指向的具體路徑，不要指定協(xié)議部分（http:, https:），除非這兩者協(xié)議都不可用。
不指定協(xié)議使得 URL 從絕對(duì)的獲取路徑轉(zhuǎn)變?yōu)橄鄬?duì)的，在請(qǐng)求資源協(xié)議無法確定時(shí)非常好用，而且還能為文件大小節(jié)省幾個(gè)字節(jié)。
不推薦
<script src="http://cdn.com/foundation.min.js"></script>
.example { background: url(http://static.example.com/images/bg.jpg);}
推薦
<script src="//cdn.com/foundation.min.js"></script>
.example { background: url(//static.example.com/images/bg.jpg);}
文本縮進(jìn)
一次縮進(jìn)兩個(gè)空格。
HTML 代碼
<ul>
<li>Fantastic</li>
<li>Great</li>
<li>
<a href="#">Test</a>
</li>
</ul>
CSS 代碼
@media screen and (min-width: 1100px) {
body {
font-size: 100%;
}
}
JavaScript 代碼
注釋
注釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關(guān)緊要的代碼時(shí)，由于記憶點(diǎn)不深刻，注釋就變得尤為重要了。
編寫自解釋代碼只是一個(gè)傳說，沒有任何代碼是可以完全自解釋的。而代碼注釋，則是永遠(yuǎn)也不嫌多。
當(dāng)你寫注釋時(shí)一定要注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當(dāng)然也可以加入所思考問題或是解決方案的鏈接地址。
一些注釋工具可以幫助你寫出更好的注釋。JSDoc 或 YUIDoc 就是用來寫 JavaScript 注釋用的。你甚至可以使用工具來為這些注釋生成文檔，這也是激勵(lì)開發(fā)者們寫注釋的一個(gè)好方法，因?yàn)橐坏┯辛诉@樣方便的生成文檔的工具，他們通常會(huì)開始花更多時(shí)間在注釋細(xì)節(jié)上。
HTML規(guī)范
文檔類型
推薦使用 HTML5 的文檔類型申明：<!DOCTYPE html>.
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）。
HTML 中最好不要將無內(nèi)容元素的標(biāo)簽閉合，例如：使用 <br> 而非 <br />.
屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性：
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
HTML 驗(yàn)證
一般情況下，建議使用能通過標(biāo)準(zhǔn)規(guī)范驗(yàn)證的 HTML 代碼，除非在性能優(yōu)化和控制文件大小上不得不做出讓步。
使用諸如 W3C HTML validator 這樣的工具來進(jìn)行檢測(cè)。
規(guī)范化的 HTML 是顯現(xiàn)技術(shù)要求與局限的顯著質(zhì)量基線，它促進(jìn)了 HTML 被更好地運(yùn)用。
不推薦
<title>Test</title>
<article>This is only a test.
推薦
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
語義化
根據(jù)元素（有時(shí)被錯(cuò)誤地稱作“標(biāo)簽”）其被創(chuàng)造出來時(shí)的初始意義來使用它。打個(gè)比方，用 heading 元素來定義頭部標(biāo)題，p 元素來定義文字段落，用 a 元素來定義鏈接錨點(diǎn)，等等。
HTML元素的排序規(guī)則，一般我們使用的HTML元素包括：div, p, ul, table, span, input, select。 基本上div, table, ul, p都屬于結(jié)構(gòu)性比較強(qiáng)的元素，而span, input則是比較弱的元素，因此不允許有span嵌套div, table等等的情況出現(xiàn)， span可以嵌套input, 可以嵌套span。程序員在寫頁面的時(shí)候可以先不考慮界面呈現(xiàn)，按照這樣的規(guī)則，把數(shù)據(jù)直接綁定到HTML元素的節(jié)點(diǎn)上。
有根據(jù)有目的地使用 HTML 元素，對(duì)于可訪問性、代碼重用、代碼效率來說意義重大。
HTML注釋
1.每一獨(dú)立部分都要表明注釋。例如：
<!--右邊 begin--> <!--右邊end--> <!--左邊 begin--><!--左邊end--> <!--頭部 begin--> <!--頭部end--> <!--講師列表 begin--> <!--講師列表end-->
2.注釋要用描述性語言，能夠清楚的表達(dá)每一部分的意思
<!--頁面標(biāo)頭 begin--> <div id="top_frame"> </div> <!--頁面內(nèi)容 begin--> <div id="main_frame"> <!--菜單區(qū)域 begin--> <div id="menu_zone"> <%=GetMenuHtml()%> </div> <!--菜單區(qū)域 end--> <!--折疊區(qū)域 begin--> <div id="switch"> <span class="_switch"></span> </div> <!--折疊區(qū)域 end--> <!--內(nèi)容區(qū)域 begin--> <div id="right_frame"> <div id="main_zone"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> </div> <!--內(nèi)容區(qū)域 end--> </div> <!--頁面內(nèi)容 end-->
關(guān)注點(diǎn)分離
為了使文檔成為可維護(hù)的干凈整潔的代碼，我們要盡可能的將信息（HTML 結(jié)構(gòu)）、外觀（CSS）和行為（JavaScript）分離開來，并使三者之間沒有太多的交互和聯(lián)系。
即在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動(dòng)作行為，移入腳本之中。 為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
清晰的分層意味著：
- 不使用超過一到兩張樣式表（i.e. main.css, vendor.css）
- 不使用超過一到兩個(gè)腳本（學(xué)會(huì)用合并腳本）
- 不使用行內(nèi)樣式（<style>.no-good {}</style>）
- 不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）
- 不使用行內(nèi)腳本（<script> alert('no good')</script>）
- 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
- 不使用表象 class 名（i.e. red, left, center）
不推薦
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="type.css">
<link rel="stylesheet" href="modules/teaser.css">
</head>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
<div class="red">I'm important!</div>
</body>
</html>
推薦
<!DOCTYPE html>
<html>
<head>
<!-- Concatinate your style sheets into a single one -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
<h1 class="title"></h1>
<!-- Don't use presentational elements and assign sensible classes -->
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
<span class="comment">Dare you center me!</span>
<!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
what you want to do with it -->
<div class="important">I'm important!</div>
<!-- Put all your scripts into files and concatinate them into a single one -->
<script async src="main.js"></script>
</body>
</html>
HTML 內(nèi)容至上
不要讓非內(nèi)容信息污染了你的 HTML?，F(xiàn)在貌似有一種傾向：通過 HTML 來解決設(shè)計(jì)問題，這是顯然是不對(duì)的。HTML 就應(yīng)該只關(guān)注內(nèi)容。
不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計(jì)問題 不要將 img 元素當(dāng)做專門用來做視覺設(shè)計(jì)的元素 以下例子展示了誤將 HTML 用來解決設(shè)計(jì)問題的這兩種情況：
不推薦
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
推薦
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。
不推薦
<!-- Content images should never be used for design elements! -->
<span class="text-box">
<img src="square.svg" alt="Square" />
See the square next to me?
</span>
推薦
<!-- That's clean markup! -->
<span class="text-box">
See the square next to me?
</span>
/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: url(square.svg) no-repeat;
background-size: 100%;
}
HTML注意事項(xiàng)
Type 屬性
省略樣式表與腳本上的 type 屬性。鑒于 HTML5 中以上兩者默認(rèn)的 type 值就是 text/css 和 text/javascript，所以 type 屬性一般是可以忽略掉的。甚至在老舊版本的瀏覽器中這么做也是安全可靠的。
不推薦
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
推薦
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
HTML 引號(hào)
使用雙引號(hào)(“”) 而不是單引號(hào)(”) 。
不推薦
<div class='news-article'></div>
推薦
<div class="news-article"></div>
屬性值
屬性一率小寫，寬度、高度等要帶上“px”
<img height="60px" width="760px" src="images/logo.gif"/>
給所有的屬性賦值
不推薦
<input „„ checked />
推薦
<input „„ checked= "checked"/>
網(wǎng)頁中圖片優(yōu)化: 一定要加alt屬性，alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本。 內(nèi)容最好與關(guān)鍵詞相關(guān)。
<img src="images/gxseo_logo.gif" alt="中英商務(wù)合作"/>
一些小圖標(biāo)最好用.gif格式圖片，比如說箭頭，文章列表前的圖標(biāo)等，在CSS中做成背景。 這些小圖標(biāo)最好做一張圖片，用CSS來定位。
語言屬性
根據(jù) HTML5 規(guī)范： 強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。
<html lang="zh-CN"> <!-- ... --> </html>
IE 兼容模式
IE 支持通過特定的 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head> <meta charset="UTF-8"> </head>
前端編碼規(guī)范（3）JavaScript 開發(fā)規(guī)范
JavaScript規(guī)范
變量聲明
總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對(duì)變量難以控制。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進(jìn)入本地定義域）。所以，請(qǐng)總是使用 var 來聲明變量。
采用嚴(yán)格模式帶來的好處是，當(dāng)你手誤輸入錯(cuò)誤的變量名時(shí)，它可以通過報(bào)錯(cuò)信息來幫助你定位錯(cuò)誤出處。
變量名
變量名推薦使用駝峰法來命名(camelCase)
全局變量為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )
函數(shù): 構(gòu)造函數(shù)始終以大寫字母開頭，非構(gòu)造函數(shù)以一個(gè)小寫字母開頭
變量名不要以 $ 作為開始標(biāo)記，避免與很多 JavaScript 庫沖突
由于篇幅過長建議大家到這里瀏覽：http://www.dhdzp.com/article/103816.htm
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 規(guī)范
大家可以到這里瀏覽：http://www.dhdzp.com/css/528728.html
相關(guān)文章
web前端開發(fā)課程 web前端開發(fā)工具有哪些
隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，用戶對(duì)于web網(wǎng)頁的依賴性越來越重，這對(duì)于web前端開發(fā)工程師的要求也在不斷提高,作為開發(fā)者來說，開發(fā)工作需要依賴很多開發(fā)工具的協(xié)助。才能更高效2017-03-22- 這篇文章主要介紹了前端開發(fā)和后端開發(fā)，哪個(gè)薪酬更高的相關(guān)資料,需要的朋友可以參考下2019-04-12