为了更好的编写可读性高,性能高的前端代码,有一顶的页面规范是很重要的一层,下面是总结出的几种规范类型。
一、文件规范
文件分类: 通用类(base,lib,ui…),业务类(album,artist,toplist…)文件引入: 行内样式(不推荐),外联引入,内联引入,避免在css中使用@import,文件本身: 文件名(由小写字母、数字、中划线组成),编码(utf-8)。
二、注释规范
块状注释:统一缩进,在被注释对象之上;单行注释:文字两端需空格,在被注释对象之上;行内注释:文字两端需空格,放在分号后面; 如:.m-list li a{color:#fff;/* 对color的行内注释 */}
三、命名规范(主要是css的命名规范)
分类命名:对于布局样式加g,对于模块加m 命名格式:选择器命名建议小写,如.list .title{color:#333}; 选择器长度需要权衡长度和可读性,如subnavigator缩写应为subnav;语义化命名 建议以内容语义命名
四、书写规范
单行与多行(建议单行) .logo{width:100%;height:100%;float:left;}空格与分号 缩进(两个空格);规则内空格(不需要);保留最后一个属性的分号,不要省略; 如.logo{width:100%;height:100%;float:left;}属性顺序 根据属性的重要性按顺序书写,水平方向从左到右,垂直方向从上到下 hack方式 统一各浏览器的hack方式 不要滥用hack 值格式 统一属性值(如color,url()):color十六进制表示,url单引号
五、其他规范
html规范 (1) 文档声明:如”<!DOCTYPE html>”,且首航顶格开始; (2)闭合:闭合标签(<div></div>),自闭和标签(<input />); (3)属性:如,统一这种写法; (4)层级:用缩进体现层级,提高可读性,标签正确嵌套,但嵌套不宜太深; (5)注释:如布局注释,头尾; (6)大小写:便签属性均小写图片规范 (1)文件名称:语义和长度,长度不宜过长; (2)保留源文件:便于修改和使用; (3)图片合并:尽可能使用sprite技术,splite图片可按模块,业务,页面来划分。