1. 代碼縮進(jìn)與格式: 建議網(wǎng)站制作單行書(shū)寫(xiě), 可根據自身習慣, 后期優(yōu)化i會(huì )統一處理;
2. 協(xié)作開(kāi)發(fā)及分工: i會(huì )根據各個(gè)模塊, 同時(shí)根據頁(yè)面相似程序, 事先寫(xiě)好大體框架文件, 分配給前端人員實(shí)現內部結構&表現&行為; 共用css文件base.css由i書(shū)寫(xiě), 協(xié)作開(kāi)發(fā)過(guò)程中, 每個(gè)頁(yè)面請務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
3. class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發(fā)框架文件時(shí)命名的, 為JavaScript預留鉤子的除外;
4. 編碼統一為utf-8;
5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類(lèi)的在2中由i統一命名.其他樣式名稱(chēng)由 小寫(xiě)英文 & 數字 & _ 來(lái)組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡(jiǎn)易的單詞組合; 總之, 命名要語(yǔ)義化, 簡(jiǎn)明化.
6. 規避class與id命名(此條重要, 若有不明白請及時(shí)與i溝通):
a） 通過(guò)從屬寫(xiě)法規避, 示例見(jiàn)d;
b）取父級元素id/class命名部分命名, 示例見(jiàn)d;
c）重復使用率高的命名, 請以自己代號加下劃線(xiàn)起始, 比如i_clear;
d）a,b兩條, 適用于在2中已建好框架的頁(yè)面, 如, 要在2中已建好框架的頁(yè)面代碼
中加入新的div元素,
按a命名法則:
,
樣式寫(xiě)法: #mainnav .firstnav{.......}
按b命名法則:
,
樣式寫(xiě)法: .main_firstnav{.......}
7. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
8. 網(wǎng)站制作書(shū)寫(xiě)代碼前, 考慮并提高樣式重復使用率;
9. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
定義
ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可實(shí)現日期居右顯示
10. 樣式表中中文字體名, 請務(wù)必轉碼成unicode碼, 以避免編碼錯誤時(shí)亂碼;
11. 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開(kāi)發(fā), sprite按模塊制作;
12. 使用table標簽時(shí)(盡量避免使用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;}, base.css文件中我會(huì )初始化表格樣式)
13. 杜絕使用
兼容 ie8;
14. 用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請為ie6單獨定義背景:
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);
15. 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;
16. 減少使用影響性能的屬性, 比如position:absolute || float ;
17. 必須為大區塊樣式添加注釋, 小區塊適量注釋;
18. 網(wǎng)站制作css屬性書(shū)寫(xiě)順序, 建議遵循: 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據自身習慣書(shū)寫(xiě), 但盡量保證同類(lèi)屬性寫(xiě)在一起. 屬性列舉: 布局定位屬性主要包括: 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; 我所列出的這些屬性只是最常用到的, 并不代表全部;
