代码规范

以下的代码规范是经常参阅多个前端团队（谷歌、Adobe、百度等）公开的代码规范后总结出来的，建议按照以下代码规范约束自己的代码。

缩进 4 个空格

使用 4 个空格作为缩进，不要使用制表符。

/* 不推荐 */
.selector {
  padding: 15px; 
}

/* 推荐 */
.selector {
    padding: 15px;
}

小写命名

选择器使用小写字母命名，如果是多个单词使用连字符 - 连接。

/* 不推荐 */
.OutBox {
    padding: 15px;
}

/* 推荐 */
.out-box {
    padding: 15px;
}

选择器列表换行

选择器列表间应该使用换行。

/* 不推荐 */
.out-box, .box, .inner-box {
    padding: 15px;
}

/* 推荐 */
.out-box,
.box,
.inner-box {
    padding: 15px;
}

0 值不指定单位

0 值指定单位明显多余。

/* 不推荐 */
.box {
    padding: 0px;
}

/* 推荐 */
.box {
    padding: 0;
}

声明顺序

相关的属性声明应该放在一起，并且尽量遵照以下的声明顺序。

1. 定位
2. 盒模型
3. 字体
4. 外观
5. 其他

/* 推荐 */
.declaration-order {
    /* 定位 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* 盒模型 */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

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

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

    /* 其他 */
    opacity: 1;
}

避免使用缩写

避免过多地使用缩写，一些情况下使用完整的属性名使代码更清晰。

/* 不推荐 */
.element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
}

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

避免使用元素选择器

直接使用元素选择器会影响到所有的元素， 尽量避免这样使用。

/* 不推荐 */
div {
    padding: 0px;
}

/* 推荐 */
.box {
    padding: 0px;
}

使用 border-box

将以下代码加在全局样式文件。

/* 推荐加在全局样式文件 */
:root {
    box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
}
*,
*:before,
*:after {
    box-sizing: inherit; /* box-sizing 继承自父元素 */
}

参考文档

1. Google HTML/CSS Style Guide
2. Code Guide by @mdo