web前端開發規範

時間 2019-11-13

標籤 web 前端開發規範欄目 HTML 简体版

原文原文鏈接

web前端開發規範

通用規範：

（1）用4個空格來代替製表符（tab）：因爲製表符在不一樣系統即便使用相同的編輯器也可能會不一致（系統對製表符的解析不一致）,因此若是想代碼在全部環境下展示一致就用4個空格代替製表符，如今不少編輯器均可以配置敲入Tab鍵時插入4個空格。
  （2）文件的命名儘可能用有意義的英文單詞加破折號「-」：
       對於文件的命名要注意：
       1）字母開頭而不是數字開頭；
       2）英文單詞（或縮寫）要所有小寫，使用破折號「-」來分割；
       3）對於一些有先後綴或特定的擴展名的文件，使用點分隔符，
下面是一些例子：
layer.js
my-style.css
my-style.min.css
jquery.cookie.min.jsjavascript

html規範：

(1) 使用html5的文檔類型，字符編碼統一使用UTF-8編碼：css

<!DOCTYPE HTML>html

<html> 前端

<head>html5

<title>test</title>jquery

</head>web

<body>數組

</body>瀏覽器

</html>

(2) 嵌套元素應當縮進一次（即兩個空格）

(3)屬性的定義，所有使用雙引號，毫不要使用單引號，如：
<input class="my-input" name="myinput" type="text">

(4)不要在自閉合元素的尾部添加斜線：
HTML中全部的自閉合標籤以下：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
推薦的例子：
<img src="....">

<br>

(5)屬性的順序：
   HTML 屬性推薦按照如下順序依次排列：
   class -> id, name -> data-* -> src, for, type, href -> title, alt -> aria-*, role

(6)布爾型屬性能夠在聲明時不賦值：
   XHTML規範要求爲其賦值，可是HTML5規範不須要。如：

</select>

(7)減小沒必要要的標籤，任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度

(8)引入 CSS 和 JavaScript 文件：
首先，根據HTML5 規範，在引入CSS和JavaScript文件時通常不須要指定type屬性，由於text/css和text/javascript分別是它們的默認值，即便在老舊版本的瀏覽器中這麼作也是安全可靠的。
而後對於腳本的加載，若是放在<head>標籤內加載腳本，那麼其加載會一直阻塞DOM解析直至它徹底地加載和執行完畢，所以能夠將HTML5的async屬性加至腳本中，它可防止阻塞DOM的解析，固然這種添加async屬性進行異步加載腳本的方式只兼容IE10+，若是須要兼容低版本瀏覽器，可以使用用來動態注入腳本的腳本加載器，能夠考慮yepnope，
對於全部的瀏覽器，推薦的例子以下：

<html>

<head>

</head>

<body>

</body>

</html>

css規範：

(1) 爲選擇器分組時，將單獨的選擇器單獨放在一行，在每一個聲明塊的左花括號前添加一個空格，聲明塊的右花括號應當單獨成行

(2) 每條聲明都應該獨佔一行，每條聲明語句的冒號」:」後應該插入一個空格，全部聲明語句都應當以分號結尾

(3) 對於以逗號分隔的屬性值，每一個逗號後面都應該插入一個空格（例如，box-shadow）

(4) 不要在rgb()、rgba()、hsl()、hsla()或rect()值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）

(5)對於屬性值或顏色參數，省略小於1的小數前面的0（例如，.5代替0.5；-.5px代替-0.5px）

(6)十六進制值應該所有小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，由於他們的形式更易於區分。在可能的狀況下，儘可能使用3個字符的十六進制表示法，如 #FF33AA 寫成 #f3a

(7)爲選擇器中的屬性添加雙引號，例如 input[type="text"]

(8)避免爲 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;

上述的點的參考例子：

.selector,

.selector-secondary,

.selector[type="text"] {

padding: 15px;

margin-bottom: 15px;

box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

}

(9)對於只包含一條聲明的樣式，爲了易讀性和便於快速編輯，建議將語句放在同一行：.span { width: 60px; }

(10)屬性聲明順序：

相關的屬性聲明應當歸爲一組，並按照下面的順序排列：

一、Positioning

二、Box model

三、Typographic

四、Visual
因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式，所以排在首位。盒模型排在第二位，由於它決定了組件的尺寸和位置。其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面。

(11)不要使用@import與<link>標籤相比，@import指令要慢不少，不光增長了額外的請求次數，還會致使不可預料的問題。替代辦法有如下幾種：

1）使用多個<link>元素

2）經過 Sass 或 Less 相似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件

3）經過 Rails、Jekyll 或其餘系統中提供過 CSS 文件合併功能

(12)帶前綴的屬性：當使用特定廠商的帶有前綴的屬性時，經過縮進的方式，讓每一個屬性的值在垂直方向對齊，這樣便於多行編，如：

.selector {

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

box-shadow: 0 1px 2px rgba(0,0,0,.15);

}

(13)簡寫形式的屬性聲明：

在須要顯示地設置全部值的狀況下，應當儘可能限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的狀況以下：

padding、margin、font、background、border、border-radius

大部分狀況下，咱們不須要爲簡寫形式的屬性聲明指定全部值。例如，HTML 的 heading 元素只須要設置上、下邊距（margin）的值，所以，在必要的時候，只需覆蓋這兩個值就能夠。過分使用簡寫形式的屬性聲明會致使代碼混亂，而且會對屬性值帶來沒必要要的覆蓋從而引發意外的反作用。

推薦使用的例子：

.element {

margin-bottom: 10px;

background-image: url(image.jpg);

border-top-left-radius: 3px;

border-top-right-radius: 3px;

}

(14)註釋：確保代碼可以自描述、註釋良好而且易於他人理解。好的代碼註釋可以傳達上下文關係和代碼目的。不要簡單地重申組件或 class 名稱。對於較長的註釋，務必書寫完整的句子；對於通常性註解，能夠書寫簡潔的短語。

/* Wrapping element for .modal-title and .modal-close */

.modal-header {

margin: 0;

}

(15)class 命名：

1）class 名稱中只能出現小寫字符和破折號(「-」)。破折號應當用於相關 class 的命名（相似於命名空間）（例如，.btn 和.btn-danger）

2）避免過分任意的簡寫。 .btn 表明 button，可是 .s不能表達任何意思

3）class 名稱應當儘量短，而且意義明確。不要使用表現形式的名稱。

4）基於最近的父 class 或基本（base） class 做爲新 class 的前綴。

5）使用 .js-* class 來標識行爲（與樣式相對），而且不要將這些 class 包含到 CSS 文件中

/* 不推薦 */

.t { ... }

.red { ... }

.header { ... }

/* 推薦 */

.tweet { ... }

.important { ... }

.tweet-header { ... }

(16)選擇器:

1）對於通用元素使用 class ，這樣利於渲染性能的優化

2）對於常常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響

3）選擇器要儘量短，而且儘可能限制組成選擇器的元素個數，建議不要超過3

4）只有在必要的時候纔將 class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用帶前綴的 class 時 – 前綴相似於命名空間）

/* 不推薦 */

span { ... }

.page-container #stream .stream-item .tweet .tweet-header .username { ... }

.avatar { ... }

/* 推薦 */

.avatar { ... }

.tweet-header .username { ... }

.tweet .avatar { ... }

JavaScript規範：

(1)普通註釋：JavaScript有單行和多行註釋，單行註釋以雙斜槓//開頭，多行註釋以/*開始，以 */ 結尾。單行註釋在註釋符後留一個空格，如：

// 這是一個單行註釋

多行註釋在結束符前留一個空格以便使星號對齊且不能把註釋內容寫在開始和結束符所在的行，如：

* 這是一個多行

* 註釋

(2)文檔註釋：/**開頭，以*/結束，中間的每一行都要以*開頭且要和開始符的第一個*對齊，註釋內容與*之間留一個空格。

文件聲明註釋:

/**

* @file Manages the configuration settings for the widget.

* @author Rowina Sanela <rsanela@example.com>

* @version 1.2.3

該註釋位於文件的最前面，其中@file 是指文件描述，@author是做者信息，@version是版本信息。

函數註釋：

/**

* 方法說明

* @function 方法名（和@function同義的標籤有@func和@method）

* @param {參數類型} 參數名參數說明

* @param {參數類型} [參數名=默認值] 參數說明

* @return {返回值類型} 返回值說明

此外還有一些經常使用的標籤如：

@todo用來描述一些要作的事，用法：@todo 描述；

@property用來聲明類屬性，用法：

/**

* 屬性說明

* @property {屬性類型} 屬性名

@constructor用來代表這個方法是個構造器，

用法：@constructor等等。

(3)分號和逗號：JavaScript 中語句要以分號結束，不然它將會繼續執行下去，無論換不換行。常見會漏掉分號的狀況是：函數聲明、對象和數組。還有逗號不能寫多，我以前遇到的狀況是在聲明對象時在最後一個屬性後面加多了一個逗號，雖然不少瀏覽器都沒有問題，但在IE8下腳本會報錯即便不影響腳本運行，但之後仍是要嚴格按照規範來，該有的分號要有，不應有的逗號不能多寫。

推薦的例子：

var myFun = function() {

return true;

};

var myObj = {

name: 'abc',

sex: 'man',

age: 18

};

(4)變量聲明：老是使用var來聲明變量。如不指定 var，變量將被隱式地聲明爲全局變量

(5)變量命名：命名規則推薦使用：第一個單詞首字母小寫，其餘單詞首字母大寫，如：userName;若是是私有變量則加上下劃線做爲前綴，如：_userName

(6)老是使用帶類型判斷的比較判斷：老是使用「===」精確的比較操做符，避免在判斷的過程當中，由 JavaScript 的強制類型轉換所形成的困擾