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 命名 (此條重要,): 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 按模組製作 SaaS WordPress; 12. 使用 table 標籤時 (盡量避免使用 table 標籤), 請不要用 width/ height/cellspacing/cellpadding 等 table 屬性直接定義表現, 應儘可能的利用 table 自身私有屬性分離結構與表現, 如 thead,tr,th,td,tbody,tfoot,colgroup,scope; 13. 杜絕使用 相容 ie8; 14. 用 png 圖片做圖片時, 要求圖片格式為 png-8 格式, 若 png-8 實在影響 WordPress SaaS 營銷型圖片質量或其中有半透明效果, 請為 ie6 單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=』img/bg.png』); 15. 避免相容性屬性的使用, 比如 text-shadow || css3 的相關屬性; 16. 減少使用影響 WordPress SaaS 營銷型效能的屬性, 比如 position:absolute || float ; 17. 必須為大區塊樣式新增注釋, 小區塊適量注釋; 18. 程序碼縮排與格式: 建議單行書寫, 可根據自身習慣, 後期優化 i 會統一處理;