} [建议] 使用 border / margin / padding 等缩写时,应注意隐含值对实际数值的影响,确实需要设置多个方向的值时才使用缩写。
解释:border / margin / padding 等缩写会同时设置多个属性的值,容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值,则应该分开设置。
示例:
CSS Code复制内容到剪贴板
/* centering <article class="page"> horizontally and highlight featured ones */
article {
margin: 5px;
border: 1px solid #999;
}
/* good */
.page {
margin-right: auto;
margin-left: auto;
}
.featured {
border-color: #69c;
}
/* bad */
.page {
margin: 5px auto; /* introducing redundancy */
}
.featured {
border: 1px solid #69c; /* introducing redundancy */
}
2.3 每个规则集之间保留一个空行
CSS Code复制内容到剪贴板
/* good */
.selector1 {
display: block;
width: 100px;
}
.selector2 {
padding: 10px;
margin: 10px auto;
}
/* bad */
.selector1 {
display: block;
width: 100px;
}
.selector2 {
padding: 10px;
margin: 10px auto;
}
3.值与单位
3.1 文本
[强制] 文本内容必须用双引号包围。
解释:文本类型的内容可能在选择器、属性值等内容中。
示例:
CSS Code复制内容到剪贴板
/* good */
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;










