CSS编写规范

• 每个样式后面必须加“：”
  方便压缩工具“断句”
• class命名中禁止出现大写字母，采用“-”对calss中的字母进行分隔

.list-one {
    width: 100px;
}

• 空格的使用

.list-one {
    width: 100px;
}

选择器与 { 之前必须要有空格属性名的 : 后必须要有空格属性名的 : 前禁止加空格

• 多选择器规则之间（必须）换行

a.btn, 
input.btn, 
input[type="button"] 
{ 
      ...... 
}

• 禁止将样式写为单行

.hotel-content {margin: 10px; background-color: #efefef;}

• 禁止向0后面加单位，例如：

.obj { 
      left: 0px;
    }

• 禁止使用css原生import
  使用css原生import有很多弊端，比如会增加请求数等....

• 属性的书写顺序, 举个例子:

.hotel-content { 
        /* 定位 */ 
        display: block; 
        position: absolute; 
        left: 0; top: 0; 
        /* 盒模型 */ 
        width: 50px; 
        height: 50px; 
        margin: 10px; 
        border: 1px solid black; 
        / *其他* / 
        color: #efefef; 
}

定位相关, 常见的有：display position left top float 等
盒模型相关, 常见的有：width height margin padding border 等
其他属性
按照这样的顺序书写可见提升浏览器渲染dom的性能

• 小图片（必须）sprite 合并
• 当编写针对特定html结构的样式时，使用元素名 + 类名

ul.nav {
     ...... 
}

.a div和.a div.b，为什么后者好？如果需求有所变化，在.a下有多加了一个div，试问，开始的样式是不是会影响后来的div啊~

• 禁止使用行内（inline）样式
• 禁止使用"*"来选择元素

* {
     margin: 0; 
     padding: 0;
}

这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。

• 链接的样式，（务必）按照这个顺序来书写

a:link -> a:visited -> a:hover -> a:active