轉載

整理一些前端開發規範文件

這份文件已經寫了差不多一年了，最近也更新過了，作為一個有組織和紀律的團隊，規範是必須的，畢竟每個coder都有自己的一套風格和規範，為了以後團隊的和諧發展，結合前端業界的開發經驗，故而寫出了一個相對是大而簡潔的文件，希望能夠對你也有所啟發。下面簡要的摘錄我的文件，詳細的可以在本文底部下載PDF文件。

第一部分：檔案規範

1. tpl, css, js, img檔案均歸檔至<系統開發規範>約定的目錄中;

2. tpl檔案命名: 英文命名, 字尾.html,請重新命名與php檔案同名, 以方便後端新增功能時查詢對應頁面;

3. css檔案命名: 英文命名, 字尾.css. 共用base.css, 首頁index.css, 其他頁面依實際模組需求命名.;

4. Js檔案命名: 英文命名, 字尾.js. 共用common.js, 其他依實際模組需求命名.

第二部分：HTML書寫規範

1. 文件型別宣告及編碼: 統一為html5宣告型別; 編碼統一為, 書寫時利用IDE實現層次分明的縮排;

2. 非特殊情況下樣式檔案必須外鏈至之間;非特殊情況下JavaScript檔案必須外鏈至頁面底部;

3 引入JS庫檔案, 檔名須包含庫名稱及版本號及是否為壓縮版, 比如jquery-1.7.1.min.js; 引入外掛, 檔名格式為庫名稱+外掛名稱, 比如jQuery.cookie.js;

1. 所有編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標籤必須閉合; 屬性值必須用雙引號包括;

2. 充分利用無相容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要為html元素新增自定義屬性的時候, 首先要考慮下有沒有預設的已有的合適標籤去設定, 如果沒有, 可以使用須以”data-”為字首來新增自定義屬性，避免使用”data:”等其他命名方式;

3. 語義化html, 如 標題根據重要性用h(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可巢狀塊級元素;

4. 儘可能減少div巢狀

5. 書寫連結地址時, 必須避免重定向，例如：href=”http://www.example.com/”, 即須在URL地址後面加上“/”；

6. 在頁面中儘量避免使用style屬性,即style=”…”，應該儘量使用class或者id來定義新的樣式，然後再對應的css檔案裡面修改;

一、 網頁製作細節

—- head區程式碼規範

head區是指HTML程式碼的和之間的內容。
必須加入的標籤：

•公司版權註釋 ；
•網頁顯示字符集。
簡體中文：
繁體中文：
英 語：
•網頁製作者資訊
•網站簡介
•搜尋關鍵字
• 網頁的css規範
•網頁標題 xxxxxxxxxxxxxxxxxx
可以選擇加入的標籤：
•設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新調閱。

•禁止瀏覽器從本地機的快取中調閱頁面內容。

•用來防止別人在框架裡呼叫你的頁面。

•自動跳轉。
5指時間停留5秒
•網頁搜尋機器人嚮導。用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。
CONTENT的引數有all,none,index,noindex,follow,nofollow。預設是all。
•收藏夾圖示 www.111cn.net

•所有的javascript的調用盡量採取外部呼叫。

•附標籤：
標籤不屬於head區，這裡強調一下，為了保證瀏覽器的相容性，必須設定頁面背景

二、網頁製作細節 —- 字型

•在設定字型樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 標記。
•在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字型。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。
•為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘量不要使用
來人工干預分段。
•不同語種的文字之間應該有一個半形空格，但避頭的符號之前和避尾的符號之後除外，漢字之間的標點要用全形標點，英文字母和數字周圍的括號應該使用半形括號。
•請不要在網頁中連續出現多於一個的 也儘量少使用全形空格（英文字符集下，全形空格會變成亂碼），空白應該儘量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
•行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
•排版中我們經常會遇到需要進行首行縮排的處理，不要使用 或者全形空格來達到效果，規範的做法是在樣式表中定義 p { text-indent: 2em; } 然後給每一段加上

標記，注意，一般情況下，請不要省略

結束標記 。

三、網頁製作細節 —- 連結

設定亮、暗邊框顏色：表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性可以對錶格樣式設定。

在寫

互相巢狀時，嚴格按照的規範，對於單獨的一個來說，對齊，

縮排兩個半形空格，

中如果還有巢狀的表格，也縮排兩個半形空格，如果 結束標記應該與 而應該是這樣的： 這是因為瀏覽器認為換行相當於一個半形空格，以上不規範的寫法相當於無意中增加一個半形空格，如果確實有必要增加一個半形空格，也應該這樣寫： 一個網頁要儘量避免用整個一張大表格，所有的內容都巢狀在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是巢狀在一個大表格之內，那麼很可能造成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然後所有的網頁內容同時出現。如果必須這樣做，請使用 標記，以便能夠使這個大表格分塊顯示 五、網頁製作細節 —- 下載速度 首頁Flash 網頁大小應限定在 200K 以下，儘可能的使用向量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，儘可能的使用背景顏色替換大塊同色圖片。 中沒有任何巢狀的表格， 處於同一行，不要換行，如我們注意在原始碼中不應有這樣的程式碼：

六、網頁製作細節 —- include

asp標準寫法：
jsp 標準寫法：<%@ include file=”../inc/index_top..jsp” %>

七、網頁製作細節 —- Alt和Title
都是提示性語言標籤，請注意它們之間的區別。

在我們瀏覽網頁時，當滑鼠停留在圖片物件或文字連結上時，在滑鼠的右下角有時會出現一個提示資訊框。對目標進行一定的註釋說明。在一些場合，它的作用是很重要的。
alt 用來給圖片來提示的。Title用來給連結文字或普通文字提示的。用法如下：

文字

文字

八、網頁製作細節 —- 快取
網頁不會被快取
•HTM網頁



•ASP網頁
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
九、網頁製作細節 —- 瀏覽器相容性
建立站點時，應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下，儘可能將站點設計為具有最大的瀏覽器相容性。

目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 使用者，但您應明確並不是每個人都在使用這兩種瀏覽器的最新版本。

第三部分：CSS規範

1. 編碼統一為utf-8;

2.公用檔案：協作開發過程中，會引入預設的base.css(裡面包括了css reset、常用的css間距，css字型，css大小等，詳細參見base.css)；

1. class與id命名: ,樣式名稱由 小寫英文 、 數字 和 _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘量使用簡易的單詞組合；命名要語義化, 簡明化。

2. 為JavaScript預留鉤子的命名, 儘量使用id屬性，可以更快的獲取到dom。

3. css屬性書寫順序, 建議遵循: 佈局定位屬性–>自身屬性–>文字屬性–>其他屬性. 此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起. 屬性列舉: 佈局定位屬性主要包括: display 、 list-style 、 position（相應的 top,right,bottom,left） 、 float & clear 、 visibility 和 overflow； 自身屬性主要包括: width 、height 、 margin 、 padding 、 border 和 background; 文字屬性主要包括：color 、 font、 text-decoration 、 text-align 、 vertical-align 、 white- space 和其他content; 我所列出的這些屬性只是最常用到的, 並不代表全部;

4. 書寫程式碼前, 考慮並提高樣式重複使用率;

5. 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模組製作;

6. 必須為大區塊樣式添加註釋, 小區塊適量註釋;

7. 程式碼縮排與格式: 建議單行書寫, 可根據自身習慣, 後期優化會統一處理;

常用的CSS命名規則
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體?丫摯磯齲?rapper
左右中：left right center
登入條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
選單：menu
子選單：submenu
搜尋：search
友情連結：friendlink
頁尾：footer
版權：copyright
滾動：scroll
內容：content
標籤：tags
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
註冊：regsiter
狀態：status
投票：vote
合作伙伴：partner

註釋的寫法:
/* Header */
內容區
/* End Header */

id的命名:
1)頁面結構

容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體?丫摯磯齲?rapper
左右中：left right center

(2)導航

導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
選單：menu
子選單：submenu
標題: title
摘要: summary

(3)功能

標誌：logo
廣告：banner
登陸：login
登入條：loginbar
註冊：register
搜尋：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標?頁：tab
文章列表：list
提示資訊：msg
當前的: current
小技巧：tips
圖示: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情連結：link
版權：copyright

注意事項::
1.一律小寫;
2.儘量用英文;
3.不加中??和下劃線;
4.儘量不縮寫，除非一看就明白的單詞。

CSS樣式表文件命名
主要的 master.css
模組 module.css
基本共用 base.css
佈局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css

第四部分：JavaScript規範

1. 檔案編碼統一為utf-8, 書寫過程過, 每行程式碼結束必須有分號; 原則上所有功能均根據XXX專案需求原生開發, 以避免網上down下來的程式碼造成的程式碼汙染(沉冗程式碼 || 與現有程式碼衝突 || …);

2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員討論決定;

3. 變數命名: 駝峰式命名. 原生JavaScript變數要求是純英文字母, 首字母須小寫, 如iTaoLun;

另, 要求變數集中宣告, 避免全域性變數.

1. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;

2. 函式命名: 首字母小寫駝峰式命名. 如iTaoLun();

3. 命名語義化, 儘可能利用英文單詞或其縮寫;

4. 儘量避免使用存在相容性及消耗資源的方法或屬性, 比如eval_r() & innerText;

5. 後期優化中, JavaScript非註釋類中文字元須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;

6. 程式碼結構明瞭, 加適量註釋. 提高函式重用率;

7. 注重與html分離, 減小reflow, 注重效能.

第五部分：圖片規範

1. 每個模組都會增加一個圖片資料夾，方便後期維護和處理，請將同一個模組的圖片放在同一個資料夾裡面，圖片檔案命名儘量跟css檔案的命名相同，儘量使用小寫命名。

2. 圖片格式僅限於gif || png || jpg;

3. 命名全部用小寫英文字母 || 數字 || -(統一用分劃線銜接) 的組合，其中不得包含漢字 || 空格 || 特殊字元；儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名分頭尾兩部分, 用分劃線隔開, 比如ad-left01.gif || btn-submit.gif;

4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少載入時間;

5. 儘量避免使用半透明的png圖片(若使用, 請參考css規範相關說明);

6. 運用css sprite技術集中小的背景圖或圖示, 減小頁面http請求。

第六部分：註釋規範

1. html註釋: 註釋格式 , 只能在註釋的始末位置,不可置入註釋文字區域;

包圍，請務必要分開註釋的文字（即註釋文字中加空格）

1. css註釋: 註釋格式 ;/**/

2. JavaScript註釋, 單行註釋使用’//這兒是單行註釋’ ,多行註釋使用 ;/**/

第七部分：開發及測試工具約定（見文件，下同）
第八部分：其他規範
第九部分：瀏覽器css hack
文件說明