1. 書寫規範
1.1 項目命名規範
項目:用項目對應的英文單詞命名
文件及文件夾:
全部英文小寫字母,可以使用中線,不可出現其他字符,如login,my-order
調用 `/lib`裏面的文件需包含版本號,壓縮文件需包含`min`關鍵詞,其他插件則可不包含,如:`/lib/jquery.1.9.1.js`
1.2 格式&編碼
文本文件: `.xxx` UTF-8_\(無BOM\)_ 編碼
圖片文件: `.png` _(PNG-24)_ `.jpg` _(壓縮率8-12)_
動態圖片: `.gif`
壓縮文件: `.tar.gz` `.zip``.rar`
2. CSS 規範
2.1 CSS 命名規範
所有的命名用小寫的英文單詞
不使用簡單的方位詞直接命名,如"left","bottom"
不縮寫單詞,除非一看就明白的單詞
長名稱或詞組可以使用下劃線作爲連接符
避免選擇器嵌套層級過多,少於3級
不要隨意使用id,id應該按需使用,而不能濫用
使用CSS縮寫屬性 ,比如padding:0 10px 5px 5px等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
命名參考如下:
CSS樣式命名 | 說明 |
---|---|
網頁公共命名 | |
wrapper | 頁面外圍控制整體佈局寬度 |
container或content | 容器,用於最外層 |
layout | 佈局 |
head, header | 頁頭部分 |
foot, footer | 頁腳部分 |
nav | 主導航 |
sub_nav | 二級導航 |
menu | 菜單 |
sub_menu | 子菜單 |
side_bar | 側欄 |
sidebar_l, sidebar_r | 左邊欄或右邊欄 |
main | 頁面主體 |
tag | 標籤 |
msg message | 提示信息 |
tips | 小技巧 |
vote | 投票 |
friendlink | 友情鏈接 |
title | 標題 |
summary | 摘要 |
login_bar | 登錄條 |
search_input | 搜索輸入框 |
hot | 熱門熱點 |
search | 搜索 |
search_output | 搜索輸出和搜索結果相似 |
search_bar | 搜索條 |
search_results | 搜索結果 |
copyright | 版權信息 |
branding | 商標 |
logo | 網站LOGO標誌 |
site_info | 網站信息 |
site_info_legal | 法律聲明 |
site_info_credits | 信譽 |
join_us | 加入我們 |
partner | 合作伙伴 |
service | 服務 |
regsiter | 註冊 |
arr arrow | 箭頭 |
guild | 指南 |
site_map | 網站地圖 |
list | 列表 |
home_page | 首頁 |
sub_page | 二級頁面子頁面 |
tool, toolbar | 工具條 |
drop | 下拉 |
dorp_menu | 下拉菜單 |
status | 狀態 |
scroll | 滾動 |
tab | 標籤頁 |
left right center | 居左、中、右 |
news | 新聞 |
download | 下載 |
banner | 廣告條(頂部廣告條) |
2.2 CSS 書寫規範
向"無ID,無層級,無標籤"準則靠攏,可有效提高重用性,減小文件大小,提升渲染效率
2.3 CSS 註釋格式
用來區分頁面的註釋,如/******************************************產品中心****************************************/
模塊的註釋,如/*首頁導航欄*/
2.4 CSS各屬性的排列順序:不做硬性要求
Positioning(定位,如position,top,z-index)
Box model(盒模型,如display,box-sizing,width,border)
Typographic(排版,如font,line-height,text-align)
Visual(視覺,如background,color,opacity)
Other(其他,如cursor)
由於定位(positioning)可以從正常的文檔流中移除元素,並且還能覆蓋盒模型(box model)相關的樣式,因此排在首位。盒模型決定了組件的尺寸和位置,因此排在第二位。 其他屬性只是影響組件的內部(inside)或者是不影響前兩組屬性,因此排在後面。
2.5 CSS格式化
使用不換行方式書寫,增加書寫速度
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 CSS字體單位
px像素(Pixel),相對長度單位,像素px是相對於顯示器屏幕分辨率而言的。
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置,則相對於瀏覽器的默認字體尺寸。
rem也是相對長度單位,但相對的只是HTML根元素。
vw代表視窗(Viewport)的寬度爲1%,如果視窗寬度爲1000px,那麼50vw = 500px
vh代表窗口高度的百分,如果視窗高度爲800px,那麼50vh = 400px
公司項目使用時注意事項:現有項目都是使用px作爲單位,現推薦使用rem,vw,vh作爲單位
3. JS 規範
3.1 JS命名規範
3.1.1 JS 變量命名
命名方法:小駝峯式命名
命名規範:前綴應當是名詞。(函數的名字前綴爲動詞,以此區分變量和函數)
命名建議:儘量在變量名字中體現所屬類型,如:length、count等表示數字類型;而包含name、title表示爲字符串類型。
示例
// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable';// 不好的命名方式var setCount = 10;var getTitle = 'LoginTable';
3.1.2 JS 函數命名
命名方法:小駝峯式命名法
命名規範:前綴應當爲動詞
命名建議:可使用常見動詞約定
動詞 | 含義 | 返回值 |
can | 判斷是否可執行某個動作(權限) | 函數返回一個布爾值。true:可執行;false:不可執行 |
has | 判斷是否含有某個值 | 函數返回一個布爾值。true:含有此值;false:不含有此值 |
is | 判斷是否爲某個值 | 函數返回一個布爾值。true:爲某個值;false:不爲某個值 |
get | 獲取某個值 | 函數返回一個非布爾值 |
set | 設置某個值 | 無返回值、返回是否設置成功或者返回鏈式對象 |
load | 加載某些數據 | 無返回值或者返回是否加載完成的結果 |
3.1.3 JS 常量命名
命名方法:名稱全部大寫
命名規範:使用大寫字母和下劃線來組合命名,下劃線用以分割單詞
示例
var MAX_COUNT = 10;var URL = 'http://www.runoob.com';
3.1.4 JS 文件命名
使用短線(-)或句點(.)作爲分隔符號,推薦使用句點,最好使用小寫英文字符,不要使用其他符號和擴展字符,如 jQuery UI 1.9.0 的源文件可命名爲"jquery-ui-1.9.0.js"
使用 .js 擴展名,這個擴展名的兼容性最好。其實任何擴展名都可以,只要是 text 類型、編碼正確即可
用句點分隔表示名稱中的從屬關係,範圍大的在前,如jQuery 的表單插件 Form既可以命名爲jquery.form.js
3.2 js 註釋格式
使用多行註釋,以/*開頭,*/結尾
3.3 js 注意事項
書寫格式
JS 換行縮進:採用tab(打散爲4個空格)
結束行需添加分號`;`
性能
儘量選用局部變量而不是全局變量
儘量使用鏈式寫法
儘量減少DOM調用
將js腳本放到頁面底部
使用jquery的data來存取數據,減少對dom的操作
使用on方法綁定事件,這是jquery的推薦使用
選擇器的選擇:儘量不用標籤選擇器,能用ID選擇器的就不用class選擇器
4. HTML 規範
4.1 標籤使用規範
儘量減少標籤層級
雙標籤必須閉合,單標籤用斜線閉合
HTML第一行統一使用HTML5標準<!DOCTYPE html>
一律統一標籤結尾斜槓的書寫形式:`<br />` `<hr />` 注意之間空格
避免使用已過時標籤,如:`<font>` `<frame>` `<s>`
`<img>`標籤默認缺省格式:`<img src="#" alt="缺省時文字" />`
`<a>`標籤缺省格式:`<a href="#" title="鏈接名稱">xxx</>` 注:`target="_blank"` 根據需求決定
style、link、script可省略type屬性,因爲 text/css 和 text/javascript 分別是他們的默認值
4.2 HTML註釋
<!--內容--><div class="content"> <p>content</p></div>
4.3 注意事項
手機端的自適應佈局儘量採用彈性佈局,而不是百分比
`css`文件都 置於頭部
HTML換行縮進:採用 tab空格
其他效果`js`及`統計代碼` 文件置於尾部
手機端的頁面都按750px來做,顯示效果按375px
5. Image 規範
5.1 圖片規範
圖片大小:切圖時使用web格式保存,減小圖片大小
圖片尺寸:一律採用整數,如20X20,50X50
圖片合併:小圖片一律要合併,並保存對應的psd文件,以便後期修改