寫了這麼久的CSS，但大部分前端er都沒有按照良好的CSS書寫規範來寫CSS程式碼，這樣會影響程式碼的閱讀體驗，這裡小編總結一個CSS書寫規範、CSS書寫順序，供大家參考習的。
1. 程式碼縮排與格式: 建議網站製作單行書寫, 可根據自身習慣, 後期優化i會統一處理;
2. 協作開發及分工: i會根據各個模組, 同時根據頁面相似程式, 事先寫好大體框架檔案, 分配給前端人員實現內部結構&表現&行為; 共用css檔案由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此檔案包含reset及頭部底部樣式, 此檔案不可隨意修改;
3. class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模組上, class可用在重複使用率高及子級中; id原則上都是由我分發框架檔案時命名的, 為JavaScript預留鉤子的除外;
4. 編碼統一為utf-8;
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 tnav{.......}
按b命名法則:
...
,
樣式寫法: _firstnav{.......}
7. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
8. 網站製作書寫程式碼前, 考慮並提高樣式重複使用率;
9. 充分利用html自身屬性及樣式繼承原理減少程式碼量, 比如:
這兒是標題列表2010-09- 15
定義
li{position:relative} 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;}, 檔案中我會初始化表格樣式)
13. 杜絕使用 相容 ie8;
14. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:
_background:none;_filter:progid:aImageLoader (sizingMethod=crop, src=’img/bg.png’);
15. 避免相容性屬性的使用, 比如text-shadow || css3的相關屬性;
16. 減少使用影響效能的屬性, 比如position:absolute || float ;
17. 必須為大區塊樣式添加註釋, 小區塊適量註釋;
