WEB前端開發規範

時間 2019-11-11

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

原文原文鏈接

規範目的css

　　爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔.本文檔若有不對或者不合適的地方請及時提出, 經討論決定後方可更改.基本準則html

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

文件規範html5

　　1. html, css, js, image文件均歸檔至約定的目錄中;jquery

　　2. html文件命名: 英文命名, 後綴.htm. 同時將對應界面稿放於同目錄中, 若界面稿命名爲中文, 請重命名與html文件同名, 以方便後端添加功能時查找對應頁面;web

3. css文件命名: 英文命名, 後綴.css. 共用base.css,其它根據模塊或頁面內容命名後端

4. Js文件命名: 英文命名, 後綴.js. 共用common.js,其餘依實際模塊需求命名.服務器

html書寫規範cookie

　　1. 文檔類型聲明及編碼: 統一爲html5聲明類型<!DOCTYPE html>; mate屬性統一爲<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">,編碼統一爲utf-8,書寫時利用IDE實現井井有條的縮進,好比dreamweave裏代碼格式化命令, 代碼縮進使用TAB鍵,儘可能別使用空格ide

　　2. css和js文件外鏈至<head>...</head>之間, css文件要放在js文件上面, js可根據需求放在尾部

3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明(html5下的規則), 寫法以下:

<linkrel=」stylesheet」 href=」…」 />

<scriptsrc=」…」></script>

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

5. 全部編碼均遵循xhtml標準, 標籤和屬性都用小寫字母, 且全部標籤必須閉合, 包括br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括; 如,height=80,應該寫爲height=」80」

6. <body>內的模塊要加上註釋,好比<!—content--><!—leftsidebar-->等

7.註釋規範. html註釋使用

8.語義化html, 如標題根據重要性用h系列標題標籤, h1-h6的定義應遵循從大到小的原則, 體現文檔結構的同時也有利於搜索引擎的查詢 (同一頁面只能有一個h1,LOGO是一個站點的標誌,頁面中最重要的地方,因此把它分配給LOGO) , h標籤不可段層; 段落標記用p, 列表用ul,ol等,內聯元素中不可嵌套塊級元素;

遵循表現和結構相分離的原則,代碼中不涉及任何表現元素, 如<center><font>標籤等

9.能以背景形式呈現的圖片, 儘可能寫入css樣式中; 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title

10. 儘量減小div嵌套, 原則上div嵌套不超出兩層, 如

<div class=「welcome」>歡迎訪問XXX,您的用戶名是

</div>

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

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

</div>

11. 特殊符號應使用轉意符,好比 <(<) & >(>)& 空格( )等;

12. 必須爲含有描述性表單元素(input,textarea)添加label,如

須寫成:

13.關注標籤語義化

css編碼規範

1. 基本書寫規範:

1)編碼統一爲utf-8

2) 儘可能不縮寫, 除非一眼就能看明白的單詞

3) 用英文和下劃線組合命名類/ID, 不容許用拼音和數字; 命名時應根據模塊內容命名

4) css所有采用小寫,每項定義寫成一行, 屬性的冒號後面要加空格, 每項定義後面要加分號; 如.box{Width: 150px;}

5) 全部裝飾性的背景圖片都要寫css中, 背景圖片使用css sprite

6) 減小使用影響性能的屬性, 好比position:absolute || float ; 不容許在css中使用濾鏡表達式, 也儘可能少用圖片repeat,尤爲在body當中,渲染性能極差, 若是須要用repeat的話, 圖片的寬或高不能少於8px

7) 請注意採用css縮寫, 簡少代碼大小, 提升下載速度, 同時使代碼簡潔可讀. 如

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

}

能夠寫爲一句:

.box{ Border: 1pxsolid #fff}

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

屬性列舉:

佈局定位屬性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相應的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等；

自身屬性主要包括: width & height & background & border;

文本屬性主要包括： font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；

其餘屬性包括: list-style(列表樣式)　＆　vertical-vlign　＆　cursor　＆　z-index(層疊順序) 　＆　zoom等. 以上所列出的這些屬性只是最經常使用到的, 並不表明所有

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

<li>這兒是標題列表<span>2010-09-15</span></li>

</ul>

css定義

ul.list li{position: relative;}

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

10) 必須爲大區塊樣式添加註釋, 小區塊適量註釋; 註釋使用 /*註釋內容*/

11)書寫代碼前, 考慮並提升樣式重複使用率, 減小代碼

2.命名規則

命名應以體現結構或內容爲原則.命名以小寫英文字母和下劃線組合,避免使用數字,要以字母開頭. 如下列出常見的基本命名，這個能夠根據我的習慣，可是請保證命名符合內容

頁面佈局：

-頁面頭部：header

-圖標：logo

-右上快捷區域：quick_links

-頁面中部：main

-側欄：side

-主欄：content

-區塊：section

-區塊頂部：box_top

-區塊中部：container

-區塊底部：box_bottom

-頁面底部：foot

-版權說明：copyright

經常使用佈局：

-列表佈局：list

-標籤切換：tab

-排行榜：billboard

-表單：post form

-純文字區域：text area

-翻頁：page navigation

通用模塊：

-導航欄：navigation

-登錄框：login box

-搜索框：search box

通用樣式：

-高亮：highlight

-激活：active，或者on

-清除浮動：fix，或者clear

-圖：pic

-文：txt

圖片規範

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

背景圖儘可能使用png-8的格式(IE6下支持其圖片透明度), 對於圖片質量要求高的背景圖片,使用png-24(IE6下不支持其透明度). 基本原則就是在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;

2. 圖片命名根據圖片用途使用小寫字母和下劃線組合,如send_btn.png等,方便其它成員理解.

3. 運用css sprite技術集中小的背景圖或圖標,減少頁面http請求

相關標籤/搜索

每日一句

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