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