前端代碼規範

時間 2019-11-08

標籤前端代碼規範简体版

原文原文鏈接

CSS規範

一、書寫規範javascript

代碼縮進：空四個空格css

選擇器單獨佔一行，每一個屬性及屬性值佔一行，屬性結束用分號； html

{ } 上下不要加空行，} 單獨佔一行，每組屬性之間空一行前端

按組件塊編寫樣式，並添加相應的註釋html5

註釋統一用/**/java

對於屬性值或顏色參數，小於 1 的省略前面的 0jquery

十六進制值應該所有小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，由於他們的形式更易於區分。git

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

二、聲明順序web

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

Positioning
Box model
Typographic
Visual

三、媒體查詢的位置

將媒體查詢放在儘量相關規則的附近。不要將他們打包放在一個單同樣式文件中或者放在文檔底部。

四、帶前綴的屬性

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

五、屬性簡寫

在須要顯示地設置全部值的狀況下,使用簡寫形式：

padding
margin
font
background
border
border-radius

六、選擇器

對於通用元素使用 class ，這樣利於渲染性能的優化。
對於常常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
選擇器要儘量短，而且儘可能限制組成選擇器的元素個數，建議不要超過 3 。
只有在必要的時候纔將 class 限制在最近的父元素內。

補充說明css 多級class命名及選擇器使用

簡單的說就是最外層作命名空間，子集加前綴，css加惟一父級名(設置專有樣式時能惟一選擇就好了，還得靈活運用)，選擇器最好不要超過三層嵌套

七、class命名

class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峯命名法）。破折號應當用於相關 class 的命名（相似於命名空間）（例如，.btn 和 .btn-danger）。
避免過分任意的簡寫。.btn 表明 button，可是 .s不能表達任何意思。（出一套經常使用簡寫）
class 名稱應當儘量短，而且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
基於最近的父 class 或基本（base） class 做爲新 class 的前綴。
使用 .js-* class 來標識行爲（與樣式相對），而且不要將這些 class 包含到 CSS 文件中。

附加說明，常見縮寫及命名，下載查看：

HTML DIV+CSS 命名規範大全.txt

八、font-family默認設置

font-family: "PingFangSC", "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;

HTML規範

一、Doctype 用標準H5寫法，並添加語言代碼屬性默認用en

<!DOCTYPE html>

語言代碼參考： https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/

二、字符編碼設置

三、嵌套縮進，四個空格 ,代碼結構更清晰些

四、使用語義化標籤，一方面提升代碼的易讀性，另外一方面，對seo比較友好

以下是經常使用H5的一些語義化標籤

header 元素

表明「網頁」或「section」的頁眉。

一般包含h1-h6元素或hgroup，做爲整個頁面或者一個內容塊的標題。

也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。

footer元素

footer元素表明「網頁」或「section」的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。若是footer元素包含了整個節，那麼它們就表明附錄，索引，提拔，許可協議，標籤，類別等一些其餘相似信息

hgroup元素

hgroup元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

nav元素

nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。

aside元素

aside元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）

section元素

section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。

section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級

article元素

article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。

五、標籤屬性使用雙引號，屬性名所有小寫，屬性要按順序書寫

屬性順序參照：

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
required, readonly, disabled

補充說明：

role屬性，加強語義性，一般用於說明一個組件的用途，而aria-*的做用就是描述這個tag在可視化的情境中的具體信息

如： <div role="button" aria-checked="checked">這是一個按鈕</div>

這兩個屬性說明這個是一個按鈕，而且狀態是選中狀態

六、布爾類型的屬性不用賦值如disable , checked

<select>

<option value="1" selected>1</option>

</select>

七、儘可能減小標籤嵌套和冗餘的父元素，HTML嵌套層數最好不超過四層。

八、自動閉合標籤結尾處要使用斜線

<img class="avatar" src="imgs/avator.png"/>

九、在引入CSS和JS時不須要指明 type，由於 text/css和 text/javascript 分別是他們的默認值

十、在JS文件中生成標籤讓內容變得更難查找，更難編輯，性能更差。應該儘可能避免這種狀況的出現

JS規範

一、縮進

使用soft tab（4個空格）。

二、單行長度

不要超過80，但若是編輯器開啓word wrap能夠不考慮單行長度。

三、分號

如下幾種狀況後需加分號：

變量聲明
表達式
return
throw
break
continue
do-while

四、空格

如下幾種狀況不須要空格：

對象的屬性名後
前綴一元運算符後
後綴一元運算符前
函數調用括號前
不管是函數聲明仍是函數表達式，'('前不要空格
數組的'['後和']'前
對象的'{'後和'}'前
運算符'('後和')'前

如下幾種狀況須要空格：

二元運算符先後
三元運算符'?:'先後
代碼塊'{'前
下列關鍵字前：else, while, catch, finally
下列關鍵字後：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
單行註釋'//'後（若單行註釋和代碼同行，則'//'前也須要），多行註釋'*'後
對象的屬性值前
for循環，分號後留有一個空格，前置條件若是有多個，逗號後留一個空格
不管是函數聲明仍是函數表達式，'{'前必定要有空格
函數的參數之間

五、空行

如下幾種狀況須要空行：

變量聲明後（當變量聲明在代碼塊的最後一行時，則無需空行）
註釋前（當註釋在代碼塊的第一行時，則無需空行）
代碼塊後（在函數調用、數組、對象中則無需空行）
文件最後保留一個空行

六、換行

換行的地方，行末必須有','或者運算符；

如下幾種狀況不須要換行：

下列關鍵字後：else, catch, finally
代碼塊'{'前

如下幾種狀況須要換行：

代碼塊'{'後和'}'前
變量賦值後

七、單行註釋

雙斜線後，必須跟一個空格；

縮進與下一行代碼保持一致；

可位於一個代碼行的末尾，與代碼間隔一個空格。

八、多行註釋

最少三行, '*'後跟一個空格，具體參照右邊的寫法；

建議在如下狀況下使用：

難於理解的代碼段
可能存在錯誤的代碼段
瀏覽器特殊的HACK代碼
業務邏輯強相關的代碼

九、文檔註釋

各種標籤@param, @method等請參考usejsdoc和JSDoc Guide；

建議在如下狀況下使用：

全部常量
全部函數
全部類

十、引號

最外層統一使用單引號。

十一、變量聲明

一個函數做用域中全部的變量聲明儘可能提到函數首部，用一個var聲明，不容許出現兩個連續的var聲明。

function doSomethingWithItems(items) { // use one var var value = 10, result = value + 10, i, len; for (i = 0, len = items.length; i < len; i++) { result += 10; } }

十二、函數

不管是函數聲明仍是函數表達式，'('前不要空格，但'{'前必定要有空格；

函數調用括號前不須要空格；

當即執行函數外必須包一層括號；

不要給inline function命名；

參數之間用', '分隔，注意逗號後有一個空格。

數組、對象

對象屬性名不須要加引號；

對象以縮進的形式書寫，不要寫在一行；

數組、對象最後不要有逗號。

1三、括號

下列關鍵字後必須有大括號（即便代碼塊的內容只有一行）：if, else,for, while, do, switch, try, catch, finally, with。

// not good if (condition) doSomething(); // good if (condition) { doSomething(); }

1四、null

適用場景：

初始化一個未來可能被賦值爲對象的變量
與已經初始化的變量作比較
做爲一個參數爲對象的函數的調用傳參
做爲一個返回對象的函數的返回值

不適用場景：

不要用null來判斷函數調用時有無傳參
不要與未初始化的變量作比較

1五、undefined

永遠不要直接使用undefined進行變量判斷；

使用typeof和字符串'undefined'對變量進行判斷。

// not good

if (person === undefined) {

...

}

// good

if (typeof person === 'undefined') {

...

}

說明：防止對未定義的變量進行undefined判斷出錯

1六、jshint

用'===', '!=='代替'==', '!='；

for-in裏必定要有hasOwnProperty的判斷；

不要在內置對象的原型上添加方法，如Array, Date；

不要在內層做用域的代碼裏聲明瞭變量，以後卻訪問到了外層做用域的同名變量；

變量不要先使用後聲明；

不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；

不要在同個做用域下聲明同名變量；

不要在一些不須要的地方加括號，例：delete(a.b)；

不要使用未聲明的變量（全局變量須要加到.jshintrc文件的globals屬性裏面）；

不要聲明瞭變量卻不使用；

不要在應該作比較的地方作賦值；

debugger不要出如今提交的代碼裏；

數組中不要存在空元素；

不要在循環內部聲明函數；

不要像這樣使用構造函數，例：new function () { ... }, new Object；

1七、雜項

不要混用tab和space；

不要在一處使用多個tab或space；

換行符統一用'LF'；

對上下文this的引用只能使用'_this', 'that', 'self'其中一個來命名；

行尾不要有空白字符；

switch的falling through和no default的狀況必定要有註釋特別說明；

不容許有空的代碼塊。

修改補充

關於CSS的權重（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

計算指定選擇器的優先級：從新認識CSS的權重

通配選擇符的權值 0,0,0,0
標籤的權值爲 0,0,0,1
類的權值爲 0,0,1,0
屬性選擇的權值爲 0,0,1,0
僞類選擇的權值爲 0,0,1,0
僞對象選擇的權值爲 0,0,0,1
ID的權值爲 0,1,0,0
important的權值爲最高 1,0,0,0

使用的規則也很簡單，就是 選擇器的權值加到一塊兒，大的優先；若是權值相同，後定義的優先 。雖然很簡單，但若是書寫的時候沒有注意，很容易就會致使CSS的重複定義，代碼冗餘。

從上面咱們能夠得出兩個關鍵的因素：

權值的大小跟選擇器的類型和數量有關
樣式的優先級跟樣式的定義順序有關

總結：

比較同一級別的個數，數量多的優先級高，若是相同即比較下一級別的個數 ，至於各級別的優先級，你們應該已經很清楚了，就是：

important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 通配符 > 繼承

這也就解釋了爲何11個標籤的定義會比不上1個類的定義，1個類加11個標籤會比不上2個類的權重高。

關於CSS的執行效率（出自http://www.cnblogs.com/xiaowuzi/p/3726835.html）

樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出。
若是你很是在乎頁面的性能那千萬別使用CSS3選擇器。實際上，在全部瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面性能的改善更值得關注。
ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
不要tag-qualify （永遠不要這樣作 ul#main-navigation { } ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）
後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
CSS3的效率問題（CSS3選擇器（好比 :nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）

Google 資深web開發工程師Steve Souders對CSS選擇器的效率從高到低作了一個排序：

1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標籤選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul > li）6.後代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.僞類選擇器（a:hover,li:nth-child）
上面九種選擇器中ID選擇器的效率是最高，而僞類選擇器的效率則是最低
詳細的介紹你們還能夠點擊Writing efficient CSS selectors。