1. 格式

• 缩进：使用soft tab，4个空格。
• 推荐使用展开格式；
• 不推荐使用紧凑格式。

推荐

.main-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #95c2ac;
    overflow: hidden;
}

不推荐

.main-wrapper { position: relative; width: 100vw; height: 100vh; color: #95c2ac; overflow: hidden; }

.main-wrapper {
    position: relative; width: 100vw; height: 100vh; color: #95c2ac; overflow: hidden;
}

.main-wrapper { position:relative; width:100vw; height:100vh; color:#95c2ac; overflow:hidden; }

2. 书写风格

• 选择器，属性名，属性值关键字全部使用小写；
• 属性声明末尾必须带分号；
• 左括号与类名之间一个空格，冒号与属性值之间一个空格；
• 属性值需要用到引号时，使用单引号；
• 逗号分隔的取值，逗号之后一个空格；
• 不要为 0 指明单位；
• 属性值为十六进制数值，尽量用简写；
• 尽量使用缩写属性。

推荐

.btn {
    display: block;
    margin: 0 10px;
    width: 100px;
    height: 50px;
    color: #000;
    font-family: 'Hiragino Sans GB';
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐

.btn{ /* 左括号与类名一个空格 */
    DISPLAY: BLOCK; /* 小写 */
    margin: 0px 10px; /* 不要为 0 指明单位 */
    width: 100px /* 分号 */
    height:50px; /* 冒号与属性值一个空格 */
    color: #000000; /* 尽量用简写 */
    font-family: "Hiragino Sans GB"; /* 使用单引号 */
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; /* 逗号之后一个空格 */
}

3. 选择器

• 尽量不用使用通用选择器 *
• 尽量不要使用 ID 选择器
• 尽量不使用无具体语义的标签选择器

/* 推荐 */
.main {}
.main li {}
.main li p {}

/* 不推荐 */
* {}
#main {}
.main div {}    

4. 避免嵌套层级过多

将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。
过度的嵌套会导致代码变得臃肿和沉余，导致css文件体积变大，性能浪费，还增加了后续代码的维护成本。