网站 css 书写规范

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 会统一处理;