前端程式碼規範大全
初衷
-
不管參與專案的人數有多少，確保每一行程式碼都像是同一個人編寫的;
-
根據實際情況制定良好的程式碼規範；
-
遵守編碼風格使程式碼更容易維護，對長期專案大有裨益；
-
實施程式碼規範增加程式碼可讀性，提高協作開發效率；
-
實施程式碼規範減少低階 bug 的出現概率；
-
提供相關工具（外掛），保障程式碼規範的無縫接入。
1、檔案/資源命名
——1.1 通用規則
-
在 web 專案中，所有的檔名應該都遵循同一命名約定，使用語義化的檔案命名，檔名要能“望文生義”，儘量避免使用拼音；
-
檔名只使用字母 a-z，數字 0-9，連字元 -，下劃線 _ 和句點 .；
-
檔案命名以字母開頭而不是數字，而以特殊字元開頭命名的檔案，一般都有特殊的含義與用處；
-
檔名中字母全部採用小寫，多個單詞用下劃線分隔（識別效率較駝峰體高）；
-
如需縮寫單詞，則應使用約定俗成的縮寫形式，如 btn、nav、num、img 等，不能自造單詞，以免引起歧義。
——1.2 目錄命名
參照檔案命名通用規則。
要合理將檔案分類到不同目錄，避免一個目錄下存放大量的檔案。
——1.3 HTML檔案命名
參照檔案命名通用規則
——1.4 CSS,SCSS,LESS檔案命名
參照檔案命名通用規則。
壓縮版本的 CSS 檔案，檔名後面需加上 .min 字尾。
——1.5 JAVASCRIPT 檔案命名
參照檔案命名通用規則。
壓縮版本的 JavaScript 檔案，檔名後面需加上 .min 字尾。
——1.6 圖片命名
參照檔案命名通用規則。
-
圖示類圖片，需在檔名前面加上 ico_ 字首。
-
背景類圖片，需在檔名前面加上 bg_ 字首。
-
雪碧圖圖片，需在檔名後面加上 _sprite 字尾。
-
Retina 圖片，需在檔名後面加上 _1x 或 _2x 字尾來標記原圖和 2 倍圖。
2、HTML
——2.1 通用規則
-
儘量遵循 HTML 標準和語義，但是不應該以浪費實用性作為代價；
-
任何時候都要用盡量小的複雜度和儘量少的標籤來解決問題；
-
不要使用 HTML5 規範中已經被廢棄的標籤；
-
使用 label 包裹附加文字的表單輸入框(radio、checkbox)；
-
標籤名全小寫；
-
屬性名全小寫，用中劃線做分隔符；
-
屬性值使用雙引號，不要使用單引號；
-
不要在自動閉合標籤結尾處使用斜線（HTML5 規範指出他們是可忽略的）。
——2.2 縮排
-
縮排使用 1 個 Tab（佔 2 個空格寬度）；
-
除 head 和 body 外，巢狀的節點應該縮排；
-
每個塊級、列表、表格元素單獨佔一行，每個子元素都相對父元素縮排；
-
堅決不要使用 Tab 和空格混搭的縮排方式。
-
使用 Tab 縮排比空格縮排有哪些優勢？
-
空格縮排一般通過鍵入 2 或 4 個空格來縮排對齊，其按鍵成本比 Tab 高得多（有些 IDE 可以設定空格寬度），使用 Tab 縮排更快捷；
-
使用 Shift + Tab 組合鍵可以選取多行向前縮排，使用空格縮排做不到；
-
Tab 可以替換，在支援正則搜尋的編輯器裡，使用 \t 可以匹配搜尋全部 Tab，空格縮排做不到。
——2.3 文件頭
-
頁面開頭必須有文件頭宣告，推薦使用 HTML5 簡單的 doctype 宣告來啟用標準模式，使頁面在每個瀏覽器中儘可能一致的展現。
-
按照慣例，doctype 應大寫。
——2.4 字元編碼
-
在 HTML 中指定字元編碼，讓瀏覽器輕鬆、快速的確定適合網頁內容的渲染方式。
-
字元編碼通常設為 UTF-8 。
——2.5 渲染模式
-
指定使用本地最高版本的 IE 來渲染頁面。
-
對於國內常見的雙核瀏覽器，指定優先採用極速模式（webkit 核心）來渲染頁面。（目前僅 360 瀏覽器支援）
——2.6 CSS 和 JAVASCRIPT 檔案引入
-
無需為引入的 CSS 和 JavaScritp 指明 type 屬性（在 HTML5 規範中，text/css 和 text/javascript 分別是他們的預設值，省略後對頁面無影響）；
-
通常引入的 CSS 檔案放在 內；
-
一般情況下，JavaScript 指令碼應放在頁面底部， 標籤前面，以免阻塞頁面載入，同時也避免了文件載入完成前 JS 無法獲取 DOM 元素的問題。
——2.7 屬性順序
-
HTML 屬性應當按照特定的順序依次排列，確保程式碼的易讀性和可維護性。
-
Class 用於標識高度可複用元件，因此應該排在首位；id 用於標識具體元件，排在第二位。
——2.8 BOOLEAN 屬性
-
HTML5 規範中，boolean 屬性不需要宣告屬性值。
-
Boolean 屬性的存在表示取值為 true，不存在則表示取值為 false。
3、CSS
—— 3.1通用規則
-
程式碼風格上要以具有可讀性、可維護性為基本原則，壓縮程式碼的工作交給工具去做；
-
css 檔案使用無 BOM 的 UTF-8 編碼；
-
不允許有空的規則；
-
元素選擇器用小寫字母；
-
不要在一個檔案裡出現兩個相同的規則；
-
不允許駝峰命名多個字母用短槓分割
-
每個屬性宣告末尾都要加分號。
——3.2 縮排
與 HTML 縮排方式一樣，縮排使用 1 個 Tab（佔 2 個空格寬度
——3.3 空格
-
屬性值前，即屬性名的 : 後加空格；
-
多個規則的分隔符 , 後加空格；
-
選擇器 >、+、~ 前後加空格；
-
{ 前加空格；
-
!important 的 ! 前加空格；
-
@else 前後加空格；
-
屬性值中的 , 後加空格；
-
SCSS 中的運算子前後要加空格；
-
每行行末不要有多餘的空格。
——3.4 換行
-
{ 後和 } 前要換行，如果只有一條屬性則例外，無需換行；
-
每個屬性獨佔一行；
-
多個選擇器的分隔符 , 後要換行；
-
相鄰的兩段樣式之間要用一個空行隔開；
-
屬性組之間需要有一個空行隔開。屬性分組規範請參閱“宣告順序”部分。
——3.5 引號
-
最外層統一使用雙引號；
-
屬性選擇器中的屬性值要用引號；
-
font-family 中含有空格的字型名需要加引號；
-
url 的內容要用引號。
-
CSS url 的內容加引號有什麼好處？
-
降低內容路徑被 XSS 注入攻擊的風險；
-
避免一些瀏覽器相容問題。
——3.6 註釋
-
註釋使用 / 註釋內容 /；
-
SCSS 中單行註釋用 // 註釋內容，不會輸出到編譯後的 CSS 中；
-
如果希望將 SCSS 中的註釋保留輸出（即使在 compressed 輸出模式下），則使用 /! 註釋內容 /；
-
註釋的縮排與下一行程式碼保持一致；
-
/ 之後、/ 之前和 // 之後要加一個空格；
-
// 寫在程式碼右側時，其與左側程式碼間隔 2 個空格。
-
注： // 註釋只用於 SCSS 中。
——3.7 命名
-
命名要符合語義，儘量避免使用拼音（約定俗成的除外，例如 youku）、無意義或理解困難、易產生歧義的字元；
-
Class 類名使用小寫字母，以中劃線分隔；
-
僅當作 JS 中選擇器使用的 class 類名，加上 js- 字首；
-
SCSS 中的變數和 placeholder 使用小寫字母，中劃線分隔；
-
id 採用小駝峰式命名；
-
SCSS 中的函式、混合採用小駝峰式命名。
——3.8 宣告順序
推薦的樣式編寫順序依次為：
-
Positioning（定位）
-
Box model（盒模型）
-
Typographic（排版）
-
Visual（視覺）
-
Misc（雜項）
——3.9 簡寫和省略
-
顏色 16 進位制用小寫字母，可以簡寫的要簡寫；
-
根據實際情況選擇屬性的簡寫方式；
-
屬性值如果是類似 0.x 的小數，則省略小數點前的 0；
-
屬性值如果是 0，則省略單位。
——3.10
字首屬性
-
同個屬性不同字首的寫法需要在垂直方向保持對齊，具體參照示例的寫法；
-
無字首的標準屬性應該寫在有字首的屬性後面。
-
如非必要，儘量不要手寫字首屬性，推薦使用自動化工具來處理，例如：autoprefixer。
——3.11
雜項
-
如果樣式表文件中包含漢字（註釋）或其他 Unicode 字元，建議在第一行加上 @UTF-8 字符集宣告，避免亂碼；
-
後代選擇、子選擇器不要超過 4 層；
-
慎用 !important；
-
儘量少用 * 選擇器。
最後：
“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”
