前端CSS规范

一个项目应该永远遵循同一套编码规范

一、文件规范

1、文件归档分类。
所有的CSS分为两大类：通用类和业务类

2、文件引入可通过外联或内联方式引入。

外联方式：<link rel="stylesheet" href="url/style.css" />
内联方式：<style>...</style>

link和style标签都应放入head中，原则上不允许在html上面直接写样式。

3、文件编码必须使用utf-8（无BOM）

二、命名规范

1、命名越简短越好，只要足够表达涵义，这样既有助于理解，也能提高代码效率。

#navigation{}.atr{}  /* 不推荐  */
#nav{}.atr{}         /* 推荐    */

2、类型选择器避免同时使用标签、ID和class作为定位一个元素选择器。从性能上考虑也尽量减少选择器的层级。

ul#example{}div.error{}   /* 不推荐   */
#example{}.error{}        /* 推荐     */

3、命名名称中不应该包含颜色（red/blue）、定位（top/left）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
命名中一律采用小写加中划线的方式，不允许使用大写字母或_;
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合;
命名注意缩写，但是不能盲目缩写。要么使用首字母，要么是字母的前几个字符;
不允许通过1、2、3等序号进行命名;
避免与class和id重名，class用于表示某一个类型的对象，命名必须言简意核;

三、书写规范

1、排版规范
采用table键缩进，或，使用4个空格缩进。而不是使用table与空格混合缩进
可以写单行或者多行，但是整个文件内的排版必须统一
属性名冒号之前不加空格，冒号之后加空格
每个声明最后都要有分号（即使是最后一个，如果省略这个分号，你的代码可能更易出错）

2、属性顺序
位置（position、top、right、z-index、display、float等）
大小（width、height、padding、margin）
文字（font、line-height、letter-spacing、color、text-aling等）
背景（background、border等）
其他（animation、transition等）

3、规则书写规范
模块注释，这个的意义就不用多说了噻;
使用单引号，不允许使用双引号;
除16进制颜色和字体设置以外，文件中其他代码都使用小写;
大型项目使用前缀（.xt-help，#xt-example）;
属性缩写;

/* 不推荐 */
border-width: 1px;  border-style: solid; border-color: #ccff00; color: #998877; padding: 0px auto; opacity: 0.8;
/* 推荐 */
border: 1px solid #cf0; color: #987; padding 0 auto; opacity: .8;

4、代码性能优化
避免内联样式
禁止在文件中使用 * 选择符
不随意使用ID
浏览器私有写法在，标注在后

-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;