3、 CSS规范

1、代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

.jdc {
    display: block;
    width: 50px;
}

团队约定：统一使用展开格式书写样式。

2、 代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */

.jdc{
    display:block;
}

/* 不推荐 */

.JDC{
    DISPLAY:BLOCK;
}

 

3、 选择器

- 尽量少用通用选择器 `*`；

- 不使用 ID 选择器；

- 不使用无具体语义定义的标签选择器；

/* 推荐 */

.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */

*{}
#jdc {}
.jdc div{}

 

4、代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

 

5、分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

 

6、代码易读性

（1）左括号与类名之间一个空格，冒号与属性值之间一个空格

*推荐：*

.jdc {
    width: 100%;
}

*不推荐：*

.jdc{
    width:100%;
}

（2）逗号分隔的取值，逗号之后一个空格

*推荐：*

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

*不推荐：*

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

（3）为单个css选择器或新申明开启新行

*推荐：*

.jdc,
.jdc_logo,
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

*不推荐：*

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

（4）颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0
*推荐：*

.jdc {
    color: rgba(255,255,255,.5);
}

*不推荐：*

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

（5）属性值十六进制数值能用简写的尽量用简写

*推荐：*

.jdc {
    color: #fff;
}

*不推荐：*

.jdc {
    color: #ffffff;
}

（6）不要为 `0` 指明单位
*推荐：*

.jdc {
    margin: 0 10px;
}

*不推荐：*

.jdc {
    margin: 0px 10px;
}

 

7、 属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */

.jdc {
    font-family: 'Hiragino Sans GB';
}

/* 不推荐 */

.jdc {
    font-family: "Hiragino Sans GB";
}

 

8、 属性书写顺序

建议遵循以下顺序：

（1） 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
（2）自身属性：width / height / margin / padding / border / background
（3）文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
（4）其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

[mozilla官方属性顺序推荐](https://www.mozilla.org/css/base/content.css)