一、規(guī)范目的
1.1?概述
為提高團隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護, 輸出高質(zhì)量的文檔, 特制訂此文檔. 本規(guī)范文檔一經(jīng)確認, 前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā). 本文檔如有不對或者不合適的地方請及時提出, 經(jīng)討論決定后可以更改此文檔.
二、文件規(guī)范
2.1?文件命名規(guī)則
文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。
a.? HTML的命名原則
引文件統(tǒng)一使用index.htm? index.html? index.asp文件名（小寫）
各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如：?
關(guān)于我們 \ aboutus?
信息反饋 \ feedback?
產(chǎn) 品 \ product
如果欄目名稱多而復雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示；
每一個目錄中應(yīng)該包含一個缺省的html 文件，文件名統(tǒng)一用index.htm? index.html? index.asp；
b.? 圖片的命名原則
圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)
例如：廣告、標志、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
標志性的圖片取名為： logo
在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button?
在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu?
裝飾用的照片我們?nèi)∶?pic
不帶鏈接表示標題的圖片我們?nèi)∶?title?
范例：banner_sohu.gif? banner_sina.gif? menu_aboutus.gif? menu_job.gif? title_news.gif? logo_police.gif?? logo_national.gif?? pic_people.jpg鼠標感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。
例如：menu1_on.gif? menu1_off.gif
c.? javascript的命名原則
例如：廣告條的javascript文件名為 ad.js? 彈出窗口的javascript文件名為 pop.js
d.? 動態(tài)語言文件命名原則
以性質(zhì)_描述，描述可以有多個單詞，用“_”隔開，性質(zhì)一般是該頁面得概要。
范例：register_form.asp?? register_post.asp?? topic_lock.asp
2.3? JavaScript書寫規(guī)范
1.?? 書寫過程中, 每行代碼結(jié)束必須有分號; 原則上所有功能均根據(jù)XXX項目需求原生開發(fā), 以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || ...);
2? ?變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為'_', 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
3.?? 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
4.?? 函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();
5.?? 命名語義化, 盡可能利用英文單詞或其縮寫;
8.?? 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval() & innerText;
9.?? 代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;
10.? 注重與html分離, 減小回流, 注重性能.
2.3? ?CSS?書寫規(guī)范
基本原則：
?
CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。
1. 樣式為設(shè)計師自定義的新 CSS 樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例：“?.shadow?”
文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“?.no12?”、“?.no12-24?”
2. 義HTML樣式為設(shè)計師重新定義已有的HTML標簽樣式，影響全部的被設(shè)定標簽樣式，用于統(tǒng)一網(wǎng)頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hr { border: 1px dotted #333333 }
3. 態(tài)樣式為設(shè)計師對鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。
該樣式寫法有2種： a.nav:link ???nav.a:link ?第一種只能修飾<a>標簽中；第二種可以修飾所有包含有<a>標簽的其他標簽。
頁面內(nèi)的樣式加載必須用鏈接方式<link rel="stylesheet" type="text/css" href="style/style.css">
注意細則：
1.????? 協(xié)作開發(fā)及分工: i會根據(jù)各個模塊, 同時根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用css文件base.css由i書寫, 協(xié)作開發(fā)過程中, 每個頁面請務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
2.????? class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發(fā)框架文件時命名的, 為JavaScript預留鉤子的除外;
3.????? 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
4.????? class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由 小寫英文 & 數(shù)字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
5.?????規(guī)避class與id命名(此條重要, 若有不明白請及時與i溝通):?
a, 通過從屬寫法規(guī)避, 示例見d;
b, 取父級元素id/class命名部分命名, 示例見d;
c, 重復使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;
d, a,b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id="mainnav"></div>中加入新的div元素,
按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,
樣式寫法:? #mainnav? .firstnav{.......}
按b命名法則:
,?
樣式寫法:? .main_firstnav{.......}
6.????? css屬性書寫順序, 建議遵循 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: margin、padding、float（包括clear）、position（相應(yīng)的 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等.我所列出的這些屬性只是最常用到的, 并不代表全部;
7.????? 書寫代碼前, 考慮并提高樣式重復使用率;
8.????? 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>
定義ul.list li{position:relative}? ul.list li span{position:absolute; right:0}
即可實現(xiàn)日期居右顯示
9.????? 樣式表中中文字體名, 請務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯誤時亂碼;
10.??? 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;
11.??? 使用table標簽時(盡量避免使用table標簽), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn), 如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;} , base.css文件中我會初始化表格樣式)
12.??? 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;
13.??? 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果, 請為ie6單獨定義背景:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
14.??? 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;
15.??? 減少使用影響性能的屬性, 比如position:absolute || float ;
命名規(guī)則：
? ?頭：header
? 內(nèi)容：content/container
? 尾：footer
? 導航：nav
? 側(cè)欄：sidebar
? 欄目：column
? 頁面外圍控制整體布局寬度：wrapper
? 左右中：left right center
? 登錄條：loginbar
? 標志：logo
? 廣告：banner
? 頁面主體：main
? 熱點：hot
? 新聞：news
? 下載：download
? 子導航：subnav
? 菜單：menu
? 子菜單：submenu
? 搜索：search
? 友情鏈接：friendlink
? 頁腳：footer
? 版權(quán)：copyright
? 滾動：scroll
? 內(nèi)容：content
? 標簽頁：tab
? 文章列表：list
? 提示信息：msg
? 小技巧：tips
? 欄目標題：title
? 加入：joinus
? 指南：guild
? 服務(wù)：service
? 注冊：regsiter
? 狀態(tài)：status
? 投票：vote
? 合作伙伴：partner
(二)注釋的寫法:
? /* Footer */
? 內(nèi)容區(qū)
? /* End Footer */
(三)id的命名:
? (1)頁面結(jié)構(gòu)
? 容器: container
? 頁頭：header
? 內(nèi)容：content/container
? 頁面主體：main
? 頁尾：footer
? 導航：nav
? 側(cè)欄：sidebar
? 欄目：column
? 頁面外圍控制整體布局寬度：wrapper
? 左右中：left right center
? (2)導航
? 導航：nav
? 主導航：mainbav
? 子導航：subnav
? 頂導航：topnav
? 邊導航：sidebar
? 左導航：leftsidebar
? 右導航：rightsidebar
? 菜單：menu
? 子菜單：submenu
? 標題: title
? 摘要: summary
? (3)功能
? 標志：logo
? 廣告：banner
? 登陸：login
? 登錄條：loginbar
? 注冊：regsiter
? 搜索：search
? 功能區(qū)：shop
? 標題：title
? 加入：joinus
? 狀態(tài)：status
? 按鈕：btn
? 滾動：scroll
? 標簽頁：tab
? 文章列表：list
? 提示信息：msg
? 當前的: current
? 小技巧：tips
? 圖標: icon
? 注釋：note
? 指南：guild
? 服務(wù)：service
? 熱點：hot
? 新聞：news
? 下載：download
? 投票：vote
? 合作伙伴：partner
? 友情鏈接：link
? 版權(quán)：copyright\
2.4?圖片規(guī)范
1.????? 所有頁面元素類圖片均放入img文件夾, 測試用圖片放于img/demoimg文件夾;
2.????? 圖片格式僅限于gif || png || jpg;
3.????? 命名全部用小寫英文字母 || 數(shù)字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
4.????? 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時間;
5.????? 盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明);
6.????? 運用css sprite技術(shù)集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務(wù)必在對應(yīng)的sprite psd源圖中劃參考線, 并保存至img目錄下.
