前言
這是一份旨在增強團隊的開發協作，提高代碼質量和打造開發基石的編碼風格規范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道，當一個團隊開始指定并實行編碼規范的話，錯誤就會變得更加顯而易見。如果一段特定的代碼不符合規范的話，它有可能只是代碼風格錯誤，而也有可能會是 bug。早期指定規范就使得代碼審核得以更好的開展，并且可以更精確的地定位到錯誤。只要開發者們能夠保證源代碼源文件都嚴格遵循規范，那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同。
要講的依次為：
一般規范
以下章節列舉了一些可應用在 HTML, JavaScript 和 CSS/SCSS 上的通用規則。
文件/資源命名
在 web 項目中，所有的文件名應該都遵循同一命名約定。以可讀性而言，減號（-）是用來分隔文件名的不二之選。同時它也是常見的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所當然的，減號應該也是用來分隔資源名稱的好選擇。
請確保文件命名總是以字母開頭而不是數字。而以特殊字符開頭命名的文件，一般都有特殊的含義與用處（比如 compass[1] 中的下劃線就是用來標記跳過直接編譯的文件用的）。
資源的字母名稱必須全為小寫，這是因為在某些對大小寫字母敏感的操作系統中，當文件通過工具壓縮混淆后，或者人為修改過后，大小寫不同而導致引用文件不同的錯誤，很難被發現。
還有一些情況下，需要對文件增加前后綴或特定的擴展名（比如 .min.js, .min.css），抑或一串前綴（比如 3fa89b.main.min.css）。這種情況下，建議使用點分隔符來區分這些在文件名中帶有清晰意義的元數據。
不推薦 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
協議
不要指定引入資源所帶的具體協議。
當引入圖片或其他媒體文件，還有樣式和腳本時，URLs 所指向的具體路徑，不要指定協議部分（http:, https:），除非這兩者協議都不可用。
不指定協議使得 URL 從絕對的獲取路徑轉變為相對的，在請求資源協議無法確定時非常好用，而且還能為文件大小節省幾個字節。
不推薦<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);} 文本縮進
一次縮進兩個空格。
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 代碼 注釋
注釋是你自己與你的小伙伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關緊要的代碼時，由于記憶點不深刻，注釋就變得尤為重要了。
編寫自解釋代碼只是一個傳說，沒有任何代碼是可以完全自解釋的。而代碼注釋，則是永遠也不嫌多。
當你寫注釋時一定要注意：不要寫你的代碼都干了些什么，而要寫你的代碼為什么要這么寫，背后的考量是什么。當然也可以加入所思考問題或是解決方案的鏈接地址。
一些注釋工具可以幫助你寫出更好的注釋。JSDoc 或 YUIDoc 就是用來寫 JavaScript 注釋用的。你甚至可以使用工具來為這些注釋生成文檔，這也是激勵開發者們寫注釋的一個好方法，因為一旦有了這樣方便的生成文檔的工具，他們通常會開始花更多時間在注釋細節上。
HTML規范
文檔類型
推薦使用 HTML5 的文檔類型申明：<!DOCTYPE html>.
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。
HTML 中最好不要將無內容元素的標簽閉合，例如：使用 <br> 而非 <br />.
屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性：
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link </a><input class="form-control" type="text"><img src="..." <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>
語義化
根據元素（有時被錯誤地稱作“標簽”）其被創造出來時的初始意義來使用它。打個比方，用 heading 元素來定義頭部標題，p 元素來定義文字段落，用 a 元素來定義鏈接錨點，等等。
HTML元素的排序規則，一般我們使用的HTML元素包括：div, p, ul, table, span, input, select。 基本上div, table, ul, p都屬于結構性比較強的元素，而span, input則是比較弱的元素，因此不允許有span嵌套div, table等等的情況出現， span可以嵌套input, 可以嵌套span。程序員在寫頁面的時候可以先不考慮界面呈現，按照這樣的規則，把數據直接綁定到HTML元素的節點上。
有根據有目的地使用 HTML 元素，對于可訪問性、代碼重用、代碼效率來說意義重大。
HTML注釋
1.每一獨立部分都要表明注釋。例如：
<!--右邊 begin--> <!--右邊end--><!--左邊 begin--><!--左邊end--><!--頭部 begin--> <!--頭部end--><!--講師列表 begin--> <!--講師列表end-->
2.注釋要用描述性語言，能夠清楚的表達每一部分的意思
<!--頁面標頭 begin--><div id="top_frame"></div><!--頁面內容 begin--><div id="main_frame"><!--菜單區域 begin--><div id="menu_zone"><%=GetMenuHtml()%></div><!--菜單區域 end--><!--折疊區域 begin--><div id="switch"><span class="_switch"></span></div><!--折疊區域 end--><!--內容區域 begin--><div id="right_frame"><div id="main_zone"><asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder></div></div><!--內容區域 end--></div><!--頁面內容 end-->
關注點分離
為了使文檔成為可維護的干凈整潔的代碼，我們要盡可能的將信息（HTML 結構）、外觀（CSS）和行為（JavaScript）分離開來，并使三者之間沒有太多的交互和聯系。
即在文檔和模板中只包含結構性的 HTML；而將所有表現代碼，移入樣式表中；將所有動作行為，移入腳本之中。 為使得它們之間的聯系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
清晰的分層意味著：
不推薦 <!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 內容至上
不要讓非內容信息污染了你的 HTML。現在貌似有一種傾向：通過 HTML 來解決設計問題，這是顯然是不對的。HTML 就應該只關注內容。
不要引入一些特定的 HTML 結構來解決一些視覺設計問題 不要將 img 元素當做專門用來做視覺設計的元素 以下例子展示了誤將 HTML 用來解決設計問題的這兩種情況：
不推薦 <!-- 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 中的唯一理由是它們呈現出了與內容相關的一些信息。
不推薦 <!-- Content images should never be used for design elements! --> <span class="text-box"> <img src="square.svg" 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注意事項
Type 屬性
省略樣式表與腳本上的 type 屬性。鑒于 HTML5 中以上兩者默認的 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 引號
使用雙引號(“”) 而不是單引號(”) 。
不推薦 <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"/>
網頁中圖片優化: 一定要加alt屬性，alt屬性指定了當圖片不能顯示的時候就顯示供替換文本。 內容最好與關鍵詞相關。
<img src="images/gxseo_logo.gif" <html lang="zh-CN"><!-- ... --></html>
IE 兼容模式
IE 支持通過特定的 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head><meta charset="UTF-8"></head>
前端編碼規范（3）JavaScript 開發規范
JavaScript規范
變量聲明
總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對變量難以控制。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進入本地定義域）。所以，請總是使用 var 來聲明變量。
采用嚴格模式帶來的好處是，當你手誤輸入錯誤的變量名時，它可以通過報錯信息來幫助你定位錯誤出處。
變量名
變量名推薦使用駝峰法來命名(camelCase)
全局變量為大寫 (UPPERCASE )
常量 (如 PI) 為大寫 (UPPERCASE )
函數: 構造函數始終以大寫字母開頭，非構造函數以一個小寫字母開頭
變量名不要以 $ 作為開始標記，避免與很多 JavaScript 庫沖突
前端編碼規范（4）—— CSS 和 Sass (SCSS) 規范
新聞熱點
疑難解答
