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