页面规范

为了更好的编写可读性高，性能高的前端代码，有一顶的页面规范是很重要的一层，下面是总结出的几种规范类型。

一、文件规范

1. 文件分类：
   通用类（base，lib，ui…），业务类（album，artist，toplist…）
2. 文件引入：
   行内样式（不推荐），外联引入，内联引入，避免在css中使用@import，
3. 文件本身：
   文件名（由小写字母、数字、中划线组成），编码（utf-8）。

二、注释规范

1. 块状注释：统一缩进，在被注释对象之上；
2. 单行注释：文字两端需空格，在被注释对象之上；
3. 行内注释：文字两端需空格，放在分号后面；
   如：.m-list li a{color:#fff;/* 对color的行内注释 */}

三、命名规范（主要是css的命名规范）

1. 分类命名：对于布局样式加g，对于模块加m
   
2. 命名格式：选择器命名建议小写，如.list .title{color:#333};
   选择器长度需要权衡长度和可读性，如subnavigator缩写应为subnav;
3. 语义化命名
   建议以内容语义命名
   

四、书写规范

1. 单行与多行（建议单行）
   .logo{width:100%;height:100%;float:left;}
2. 空格与分号
   缩进（两个空格）；规则内空格（不需要）；保留最后一个属性的分号，不要省略；
   如.logo{width:100%;height:100%;float:left;}
3. 属性顺序
   根据属性的重要性按顺序书写，水平方向从左到右，垂直方向从上到下
   
4. hack方式
   统一各浏览器的hack方式
   不要滥用hack
   
5. 值格式
   统一属性值（如color，url()）：color十六进制表示，url单引号

五、其他规范

1. html规范
   （1） 文档声明：如””,且首航顶格开始；
   （2）闭合：闭合标签（
   ），自闭和标签（）；
   （3）属性：如,统一这种写法；
   （4）层级：用缩进体现层级，提高可读性，标签正确嵌套，但嵌套不宜太深；
   （5）注释：如布局注释，头尾；
   （6）大小写：便签属性均小写
2. 图片规范
   （1）文件名称：语义和长度，长度不宜过长；
   （2）保留源文件：便于修改和使用；
   （3）图片合并：尽可能使用sprite技术，splite图片可按模块，业务，页面来划分。