第 2 卷

从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

1. 很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区

别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直

接子选择器。

不推荐:

.content .title { font-size: 2rem;

}

推荐:

.content > .title { font-size: 2rem;

}

1.3.3 尽量使用缩写属性

不推荐：

border-top-style: none;

font-family: palatino, georgia, serif;

font-size: 100%;

line-height: 1.6;

padding-bottom: 2em;

padding-left: 1em;

padding-right: 1em;

padding-top: 0;

推荐：

border-top: 0;

font: 100%/1.6 palatino, georgia, serif;

padding: 0 1em 2em;

button{ width:100px;height:50px;color:#fff;background:#00a0e9;

}

推荐：

button{ width:100px;

height:50px;

color:#fff;

background:#00a0e9;

}

1.3.5 省略0后面的单位

不推荐：

div{ padding-bottom: 0px;

margin: 0em;

}

推荐：

div{ padding-bottom: 0;

margin: 0;

}

1.3.6 避免使用ID选择器及全局标签选择器防止污染全局样式

不推荐：

#header{ padding-bottom: 0px;

margin: 0em;

}

padding-bottom: 0px;

margin: 0em;

}

(四) LESS 规范

1.4.1 代码组织

1)将公共less文件放置在style/less/common文件夹

2)按以下顺序组织

1. @import;
2. 变量声明;
3. 样式声明;

@import "mixins/size.less";

@default-text-color: #333;

.page { width: 960px;

margin: 0 auto;

}

1.4.2 避免嵌套层级过多

将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。

避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现不推荐：

.main{ .title{

.name{ color:#fff

} }

}

推荐：