前端规范之css

1. 每个样式属性后（必须）加 ";"

     方便压缩工具"断句"。

2. Class命名中（禁止）出现大写字母，（必须）采用” - “对class中的字母分隔，如：

 正确的写法  .header-title { font-weight: bold; }

不推荐的写法  .headerTitle { font-weight: bold; }

用"-"隔开比使用驼峰是更加清晰。

产品线-产品-模块-子模块，命名的时候也可以使用这种方式。

3. 空格的使用，以下规则（必须）执行：

.hotel-content { font-weight: bold; }

选择器与{ 之前（必须）要有空格

属性名的: 后（必须）要有空格

属性名的: 前（禁止）加空格

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

当样式针对多个选择器时每个选择器占一行

/* 推荐的写法 */ 

a.btn,

input.btn,

input[type="button"] {    ......

}

5.（禁止）将样式写为单行, 如

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

6.（禁止）向 0 后添加单位, 如：

.obj {    left: 0px;}

7. （禁止）使用css原生import

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

8.（推荐）属性的书写顺序, 举个例子:

.hotel-content {

/* 定位 */ display: block;

 position: absolute; 

 left: 0;

 top: 0;

/* 盒模型 */

 width: 50px; 

 height: 50px;

 margin: 10px; 

 border: 1px solid black;

 / *其他* /

color: #efefef;

 }

定位相关, 常见的有：displaypositionlefttopfloat等

盒模型相关, 常见的有：widthheightmarginpaddingborder等

其他属性

9.（推荐）当编写针对特定html结构的样式时，使用元素名+ 类名

/* 所有的nav都是针对ul编写的 */

 ul.nav {    ......

}

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

10. （禁止）使用行内（inline）样式

开心

像这样的行内样式，最好用一个class代替。又如要隐藏某个元素，可以给他加一个class

.hide {    display: none;}

尽量做到样式和结构分离~