web前端開發規範

時間 2019-11-24

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

原文原文鏈接

1、規範概述css

1.1. 目的html

爲提升團隊協做效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，特制訂此文檔。本規範文檔一經確認，前端開發人員必須按本文檔規範進行前臺頁面開發。本文檔若有不對或者不合適的地方請及時提出，經討論決定後方可更改。前端

1.2. 準則html5

符合web標準，語義化html，結構表現行爲分離，兼容性優良。頁面性能方面，代碼要求簡潔明瞭有序，儘量的減少服務器負載，保證最快的解析速度。jquery

2、文件規範css3

2.1. 基本要求web

1) 對頁面中標籤屬性的值都須要用雙引號包括起來後端

2) 全部頁面編碼均採用utf-8瀏覽器

2.2. 文件存放與命名規範服務器

1) html，css，js，images文件均歸檔至《系統開發規範》約定的目錄中；

2) html文件命名：英文命名，後綴.htm，同時將對應界面稿放於同目錄中, 並要求與html文件同名，以方便後端添加功能時查找對應頁面；

3) css文件命名：英文命名，後綴.css，共用base.css，首頁index.css，其餘頁面依實際模塊需求命名；

4) js文件命名：英文命名，後綴.js，共用common.js，其餘依實際模塊需求命名。

2.3. html書寫規範

1) 文檔類型聲明及編碼：統一爲html5聲明類型<!DOCTYPE html>；編碼統一爲<meta charset="utf-8" />，書寫時利用IDE實現井井有條的縮進；

2) 非特殊狀況下樣式文件必須外鏈至<head>...</head>之間；非特殊狀況下JavaScript文件必須外鏈至頁面底部；

3) 引入樣式文件或JavaScript文件時，須略去默認類型聲明，寫法以下：

4) 引入JS庫文件，路徑或文件名須包含庫名稱及版本號及是否爲壓縮版，好比jquery-1.4.1.min.js；引入插件，文件名格式爲庫名稱+插件名稱，好比jQuery.cookie.js；

5) 全部編碼均遵循xhtml標準，標籤、屬性、屬性命名必須由小寫字母及下劃線數字組成，且全部標籤必須閉合，包括 br (<br />), hr(<hr />)等；屬性值必須用雙引號包括；

6) 充分利用無兼容性問題的html自身標籤，好比span、em、strong、optgroup、 label，等等；須要爲html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標籤去設置，若是沒有，可使用須以"data-"爲前綴來添加自定義屬性，避免使用"data:"等其餘命名方式；

7) 語義化html，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，列表用ul，內聯元素中不可嵌套塊級元素；

8) 儘量減小div嵌套，如：

<div class="welcome">歡迎訪問XXX，您的用戶名是

</div>

徹底能夠用如下代碼替代：

<p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p>

</div>

9) 書寫連接地址時，必須避免重定向，例如：href=http://itaolun.com/，即須在URL地址後面加上「/」；

10) 在頁面中儘可能避免使用style屬性,即style="…"；

11) 必須爲含有描述性表單元素(input，textarea)添加label，如：

須寫成：

<p>

</p>

12) 能以背景形式呈現的圖片，儘可能寫入css樣式中；

13) 重要圖片必須加上alt屬性，重要的元素和截斷的元素加上title；

14) 給區塊代碼及重要功能(好比循環)加上註釋, 方便後臺添加功能；

15) 特殊符號使用：儘量使用代碼替代: 好比 <(<)、>(>)、空格( )等等；

16) class和id 參見 css書寫規範。

2.4. css書寫規範

1) 編碼統一爲utf-8；

2) CSS的命名

　　外套:wrap

　　主導航:mainNav

　　子導航:subnav

　　頁腳:footer

　　整個頁面:content

　　頁眉:header

　　頁腳:footer

　　商標:label

　　標題:title

　　主導航:mainNav(globalNav)

　　頂導航:topnav

　　邊導航:sidebar

　　左導航:leftsideBar

　　右導航:rightsideBar

　　旗志:logo

　　標語:banner

　　菜單內容1:menu1Content

　　菜單容量:menuContainer

　　子菜單:submenu

　　邊導航圖標:sidebarIcon

　　註釋:note

　　麪包屑:breadCrumb(即頁面所處位置導航提示)

　　容器:container

　　內容:content

　　搜索:search

　　登錄:login

　　功能區:shop(如購物車，收銀臺)

　　當前的current

3) 樣式文件命名

　　主要的:master.css

　　佈局版面:layout.css

　　專欄:columns.css

　　文字:font.css

　　打印樣式:print.css

　　主題:themes.css

頁頭:header

　　登陸條:loginBar

　　標誌:logo

　　側欄:sideBar

　　廣告:banner

　　導航:nav

　　子導航:subNav

　　菜單:menu

　　子菜單:subMenu

　　搜索:search

　　滾動:scroll

　　頁面主體:main

　　內容:content

　　標籤頁:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　欄目標題:title

　　友情連接:friendLink

　　頁腳:footer

　　加入:joinus

　　指南:guild

　　服務:service

　　熱點:hot

　　新聞:news

　　下載:download

　　註冊:regsiter

　　狀態:status

　　按鈕:btn

　　投票:vote

　　合做夥伴:partner

版權:copyRight

4) class與id的使用：id是惟一的並是父級的，class是能夠重複的並是子級的，因此id僅使用在大的模塊上，class可用在重複使用率高及子級中；

5) class與id命名:名稱由小寫英文、數字和下劃線來組合命名，如zy_comment，fontred，width200；避免使用中文拼音，儘可能使用簡易的單詞組合；總之，命名要語義化，簡明化；

6) CSS書寫範例

#headed{ }

.top{}

.top ul{ }

.top ul li{ }

.top ul li span{}

.top ul li img{ }

.top ul li a{}

.top ul li a:hover {}

………

7) css屬性書寫順序，建議遵循：佈局定位屬性 -> 自身屬性 -> 文本屬性 -> 其餘屬性。此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒。屬性列舉：

n 佈局定位屬性主要包括：display、list-style、position（相應的 top,right,bottom,left）、float、clear、visibility、overflow；

n 自身屬性主要包括：width、height、margin、padding、border、background；

n 文本屬性主要包括：color、font、text-decoration、text-align、vertical-align、white-space；

n 其餘屬性：content；

以上列出的這些屬性只是最經常使用到的，並不表明所有。

8) 書寫代碼前，考慮並提升樣式重複使用率；

9) 充分利用html自身屬性及樣式繼承原理減小代碼量，好比：

<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>

定義

ul.list li{position:relative}

ul.list li span{position:absolute; right:0}

便可實現日期居右顯示。

10) 樣式表中中文字體名，請務必轉碼成unicode碼，以免編碼錯誤時亂碼；

11) 背景圖片請儘量使用sprite技術，減少http請求，考慮到多人協做開發，sprite按模塊製做；

12) 使用table標籤時(儘可能避免使用table標籤)，請不要用width、height、cellspacing、cellpadding等table屬性直接定義表現，應儘量的利用table自身私有屬性分離結構與表現，如：thead、tr、th、td、tbody、tfoot、 colgroup、scope；

而cellspaing及cellpadding的css控制方法以下：

table{border:0;margin:0;border-collapse:collapse;}

table th, table td{padding:0;}

13) 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8

14) 用png圖片作圖片時，要求圖片格式爲png-8格式，若png-8實在影響圖片質量或其中有半透明效果，請爲ie6單獨定義背景，代碼：

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);

15) 避免兼容性屬性的使用，好比text-shadow、css3的相關屬性；

16) 減小使用影響性能的屬性，好比position:absolute、float；

17) 必須爲大區塊樣式添加註釋，小區塊適量註釋；

18) css默認設置

@charset "utf-8";

*{ margin:0;padding:0;}

ul,ol,dl { list-style-type:none;}

19) 前端部分:

<1> . 頁面框架使用 CSS ID 選擇器

例: <div id=」header」></div>

Css: # header{}

<2>. ID 選擇器內使用類選擇器 CLASS

例: <div id=」header」>

</div>

Css: # header{}

.top{}

<3>. CLASS選擇器內非特殊樣式定義,需使用派生選擇器

例:<div id=」header」>

<ul>

</ul>

</div>

Css: # header{}

.top{}

.top ul{}

.top ul li{}

……

<4>.H strong b 標籤的使用

H1標籤: 不得超過1次

strong b標籤僅對關鍵字部分使用

2.5. JavaScript書寫規範

1) 文件編碼統一爲utf-8書寫過程過，每行代碼結束必須有分號，原則上全部功能均根據XXX項目需求原生開發，以免網上down下來的代碼形成的代碼污染(沉冗代碼、現有代碼衝突...);

2) 變量命名：駝峯式命名。原生JavaScript變量要求是純英文字母，首字母須小寫，如：iTaoLun；另，要求變量集中聲明，避免全局變量；

3) 類命名：首字母大寫，駝峯式命名。如：ItaoLun；

4) 函數命名：首字母小寫駝峯式命名。如iTaoLun()；

5) 命名語義化，儘量利用英文單詞或其縮寫；

6) 儘可能避免使用存在兼容性及消耗資源的方法或屬性，好比eval()、innerText等；

7) 後期優化中，JavaScript非註釋類中文字符須轉換成unicode編碼使用，以免編碼錯誤時亂碼顯示；

8) 代碼結構明瞭，加適量註釋。提升函數重用率；

9) 注重與html分離，減少reflow，注重性能；

10) js文件加載 <script src="**.js"></script>；

11) js變量賦值 <script>var v=」123」;</script>；

12) js調用函數 <script>getFun();</script>；

13) 非特殊狀態不得頁面嵌入 <script>代碼</script>；

2.6. 圖片規範

1) 全部頁面元素類圖片均放入系統指定的文件夾, 測試用圖片放於demoimg文件夾；

2) 圖片格式僅限於gif、png、jpg；

3) 命名所有用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格、特殊字符；儘可能用易懂的詞彙，便於團隊其餘成員理解；另，命名分頭尾兩部分，用下劃線隔開，樣例以下表：

圖片分類	命名
廣告、裝飾圖案等長方形的圖片	ad_
標誌性的圖片	log_
在頁面上位置不固定而且帶有連接的小圖片（按鈕）	btn_
導航圖片	nav_
菜單圖片	men_
裝飾用的照片取名	pic_
不帶連接表示標題的圖片取名	tit_
小圖標	ico_
背景圖片	bg_

4) 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量，以減小加載時間；

5) 儘可能避免使用半透明的png圖片(若使用，請參考css規範相關說明)

6) 運用css sprite技術集中小的背景圖或圖標，減少頁面http請求，但注意，請務必在對應的sprite psd源圖中劃參考線。

三.開發及測試工具約定

建議使用Aptana、Dw、Vim，亦可根據本身喜愛選擇，但須遵循以下原則：

1) 不可利用IDE的視圖模式'畫'代碼；

2) 不可利用IDE生成相關功能代碼，好比Dw內置的一些功能js；

3) 編碼必須格式化，好比縮進。

測試工具：前期開發僅測試FireFox、IE六、IE七、IE8，後期優化時加入Opera、Chrome、Safari；

建議測試順序：FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari，建議安裝firebug及IE Tab Plus插件。

四.CSS Hack

即便是完美的CSS也未必能在目前衆多的瀏覽器中呈現一致的效果，因此，CSS Hack在不少狀況下都是必要的，建議先以對CSS標準支持得比較好的瀏覽器（Firefox或者Chrome）爲主編輯CSS，最後在處理IE的兼容性——單獨爲IE創建一個CSS文件（好比：for-ie.css或ie-hack.css等），最後在HTML文件中，經過IE的條件註釋按需引入。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。