- 无特殊说明,编码统一为utf-8;为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字(unicode码), 如:宋体( \5b8b\4f53)微软雅黑(”Microsoft YaHei”,”\5FAE\8F6F\96C5\9ED1″),几个单词中间有空格组成的必须加引号) ;
- 为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”或”_”符或单词首字母大写(第一个单词除外)。 如:”main-content”或”mainContent”。关于class与id命名等详细请参考命名规范,样式实现除特殊情况,全优先使用 class;
- CSS引用按照制定的框架结构来使用,详情见css框架结构;
- 命名避免结构化方式,尽量使用语义化/功能化方式,如下示例:
结构化命名与语义化命名
而现在我们想把页面中的元素调换一下位置,
结构化命名与语义化命名
换句话说,使用语义化方式的话,你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。
- class与id的使用: id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是在分发框架文件时统一命名,为JavaScript预留钩子的除外;
- 为JavaScript预留钩子的命名,请以 JS_ 起始,比如:JS_hide, JS_show;
- 充分利用html自身属性及样式继承原理减少代码量,或制定特定标签的指定使用方式,比如:全局统一价格标签<dfn>¥<i>320</i>起</dfn>
- 书写代码前,考虑并提高样式重复使用率;
- 禁止使用expression表达式;
- 禁止滥用!important(使用前必须讨论确认不会造成其他BUG或者维护问题);
- 尽量少的使用滤镜,尽量减少hack数,能不hack的坚决不hack;
- 字体粗细采用具体数值,粗体bold写为700,正常normal写为400;
- 能缩写的尽量缩写,如 padding:5px 0 0 5px;
- 去掉0后面的单位(禁止出现如0px等多余的单位)、颜色值使用颜色的名称或者16进制代码16进制来表示,CSS3的rgb除外;
- 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999,如showWin、pop等),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比。
- 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不应设置外边界,外边界用组合css方式实现,如:pd10{padding:10px}mt10{margin-top:10px}等;
- 必须为大区块&重要模块的样式添加注释,小区块适量注释;
- 代码缩进与格式:统一单行书写,可根据自身习惯,后期优化会统一处理;
- 正式发布前应进行压缩,压缩后文件的命名应添加”_min”后缀;