css代码规范

阮一峰新增 css 教程：https://github.com/wangdoc/css-tutorial/tree/master/docs

4 个空格
在每个声明的左括号前增加一个空格，声明块的右括号应该另起一行： .selector { }
所有的十六进制值都应该使用小写字母，例如 #fff
尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。
为选择器中得属性取值添加引号，例如 input[type="text"]
不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;

相关的属性声明应该以下面的顺序分组处理

Positioning
Box model 盒模型
Typographic 排版
Visual 外观

/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;

媒体查询位置靠近他们相关的规则
不要使用 @import : 与相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。
前缀属性: 当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。
坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）
Class 的命名应该尽量短，也要尽量明确,最多三个：.top-title-p
以组件为单位组织代码
使用一致的空白来分割代码块
编辑器配置 -使用 4 个空格的 soft-tabs
- 在保存时删除尾部的空白字符
- 设置文件编码为 UTF-8
- 在文件结尾添加一个空白行