一个寝室3个攻一受全h_97国产福利_在线中文字幕理伦电影_www.youjizz.com国产

首頁?>?知識?資訊?>?網站css書寫規范/。?>?正文

網站css書寫規范/。

2015/8/14 0:00:00 · 稿源:傳誠信


1.?編碼統一為utf-8;

2.?協作開發及分工:?i會根據各個模塊,?同時根據頁面相似程序,?事先寫好大體框架文件,?分配給前端人員實現內部結構&表現&行為;?共用css文件base.css由i書寫,?協作開發過程中,?每個頁面請務必都要引入,?此文件包含reset及頭部底部樣式,?此文件不可隨意修改;

3.?class與id的使用:?id是唯一的并是父級的,?class是可以重復的并是子級的,?所以id僅使用在大的模塊上,?class可用在重復使用率高及子級中;?id原則上都是由我分發框架文件時命名的,?為JavaScript預留鉤子的除外;

4.?為JavaScript預留鉤子的命名,?請以?js_?起始,?比如:?js_hide,?js_show;

5.?class與id命名:?大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由?小寫英文?&?數字?&?_?來組合命名,?如i_comment,?fontred,?width200;?避免使用中文拼音,?盡量使用簡易的單詞組合;?總之,?命名要語義化,?簡明化.

6.?規避class與id命名(此條重要,?若有不明白請及時與i溝通):??

a,?通過從屬寫法規避,?示例見d;?

b,?取父級元素id/class命名部分命名,?示例見d;?

c,?重復使用率高的命名,?請以自己代號加下劃線起始,?比如i_clear;?

d,?a,b兩條,?適用于在2中已建好框架的頁面,?如,?要在2中已建好框架的頁面代碼中加入新的div元素,

按a命名法則:?

...

,?

樣式寫法:??#mainnav??.firstnav{.......}

按b命名法則:?

...

,?

樣式寫法:??.main_firstnav{.......}

7.?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等.?我所列出的這些屬性只是最常用到的,?并不代表全部;

8.?書寫代碼前,?考慮并提高樣式重復使用率;

9.?充分利用html自身屬性及樣式繼承原理減少代碼量,?比如:

  • 這兒是標題列表2010-09-15

定義ul.list?li{position:relative}??ul.list?li?span{position:absolute;?right:0}

即可實現日期居右顯示

10.?樣式表中中文字體名,?請務必轉碼成unicode碼,?以避免編碼錯誤時亂碼;

11.?背景圖片請盡可能使用sprite技術,?減小http請求,?考慮到多人協作開發,?sprite按模塊制作;

12.?使用table標簽時(盡量避免使用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文件中我會初始化表格樣式)

13.?杜絕使用?兼容ie8;

14.?用png圖片做圖片時,?要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果,?請為ie6單獨定義背景:

background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,?src=’img/bg.png’);

15.?避免兼容性屬性的使用,?比如text-shadow?||?css3的相關屬性;

16.?減少使用影響性能的屬性,?比如position:absolute?||?float?;

17.?必須為大區塊樣式添加注釋,?小區塊適量注釋;


18.?代碼縮進與格式:?建議單行書寫,?可根據自身習慣,?后期優化i會統一處理;

  • 相關推薦
  • 大家在看
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354