1. 前言
文档目标是使CSS代码风格保持一致，容易被理解和被维护。
虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)
2. 代码风格
2.1. 文件
[建议] CSS 文件使用无 BOM 的 UTF-8 编码。
解释
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
2.2. 缩进
[强制]使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
示例
|
|
2.3. 空格
[强制] 选择器 与 { 之间必须包含空格。
示例
|
|
[强制] 属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。
示例margin: 0
[强制] 列表型属性值 书写在单行时, 后必须跟一个空格。
示例
/ 不同属性值按逻辑分组 /
background:
transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
no-repeat 0 0;
/ 可重复多次的属性，每次重复一行 /
background-image:
url(aVeryVeryVeryLongUrlIsPlacedHere)
url(anotherVeryVeryVeryLongUrlIsPlacedHere);
/ 类似函数的属性值可以根据函数调用的缩进进行 /
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(88,94,124)),
color-stop(0.52, rgb(115,123,162))
);
.post,
.page,
.comment {
line-height: 1.5;
}
/ bad /
.post, .page, .comment {
line-height: 1.5;
}
/ good /
main > nav {
padding: 10px;
}
label + input {
margin-left: 5px;
}
input:checked ~ button {
background-color: #69C;
}
/ bad /
main>nav {
padding: 10px;
}
label+input {
margin-left: 5px;
}
input:checked~button {
background-color: #69C;
}
/ good /
article[character=”juliet”] {
voice-family: “Vivien Leigh”, victoria, female
}
/ bad /
article[character=’juliet’] {
voice-family: “Vivien Leigh”, victoria, female
}
.selector {
margin: 0;
padding: 0;
}
/ bad /
.selector { margin: 0; padding: 0; }
/ good /
.selector {
margin: 0;
}
/ bad /
.selector {
margin: 0
}
/ good /
#error,
.danger-message {
font-color: #c00;
}
/ bad /
dialog#error,
p.danger-message {
font-color: #c00;
}
/ good /
#username input {}
.comment .avatar {}
/ bad /
.page .header .login #username input {}
.comment div * {}
/ good /
.post {
font: 12px/1.5 arial, sans-serif;
}
/ bad /
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
/ centering
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 /
}
.sidebar {
/ formatting model: positioning schemes / offsets / z-indexes / display / … /
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
/ good /
html[lang|=”zh”] q:before {
font-family: “Microsoft YaHei”, sans-serif;
content: ““”;
}
html[lang|=”zh”] q:after {
font-family: “Microsoft YaHei”, sans-serif;
content: “””;
}
/ bad /
html[lang|=zh] q:before {
font-family: ‘Microsoft YaHei’, sans-serif;
content: ‘“’;
}
html[lang|=zh] q:after {
font-family: “Microsoft YaHei”, sans-serif;
content: “””;
}
/ good /
panel {
opacity: .8
}
/ bad /
panel {
opacity: 0.8
}
body {
background: url(bg.png);
}
body {
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
/ good /
body {
padding: 0 5px;
}
/ bad /
body {
padding: 0px 5px;
}
/ good /
.success {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
}
/ bad /
.success {
box-shadow: 0 0 2px rgba(0,128,0,.3);
border-color: rgb(0, 128, 0);
}
/ good /
.success {
background-color: #aca;
}
/ bad /
.success {
background-color: #aaccaa;
}
/ good /
.success {
color: #90ee90;
}
/ bad /
.success {
color: lightgreen;
}
/ good /
.success {
background-color: #aca;
color: #90ee90;
}
/ good /
.success {
background-color: #ACA;
color: #90EE90;
}
/ bad /
.success {
background-color: #ACA;
color: #90ee90;
}
/ good /
body {
background-position: center top; / 50% 0% /
}
/ bad /
body {
background-position: top; / 50% 0% /
}
h1 {
font-family: “Microsoft YaHei”;
}
/ Display according to platform /
.article {
font-family: Arial, sans-serif;
}
/ Specific for most platforms /
h1 {
font-family: “Helvetica Neue”, Arial, “Hiragino Sans GB”, “WenQuanYi Micro Hei”, “Microsoft YaHei”, sans-serif;
}
/ good /
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, “Microsoft YaHei”, sans-serif;
}
/ bad /
body {
font-family: arial, sans-serif;
}
h1 {
font-family: Arial, “Microsoft YaHei”, sans-serif;
}
/ good /
h1 {
font-weight: 700;
}
/ bad /
h1 {
font-weight: bold;
}
.container {
line-height: 1.5;
}
/ good /
.box {
transition: color 1s, border-color 1s;
}
/ bad /
.box {
transition: all 1s;
}
/ good /
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); / move right for 20px /
}
/ bad /
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; / move right for 20px /
}
/ Good /
/ header styles /
@media (…) {
/ header styles /
}
/ main styles /
@media (…) {
/ main styles /
}
/ footer styles /
@media (…) {
/ footer styles /
}
/ Bad /
/ header styles /
/ main styles /
/ footer styles /
@media (…) {
/ header styles /
/ main styles /
/ footer styles /
}
@media
(-webkit-min-device-pixel-ratio: 2), / Webkit-based browsers /
(min–moz-device-pixel-ratio: 2), / Older Firefox browsers (prior to Firefox 16) /
(min-resolution: 2dppx), / The standard way /
(min-resolution: 192dpi) { / dppx fallback /
/ Retina-specific stuff here /
}
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/ IE 7 /
*:first-child + html #header {
margin-top: 3px;
padding: 5px;
}
/ IE 6 /
- html #header {
margin-top: 5px;
padding: 4px;
}12[建议] 尽量使用简单的 属性 hack。示例
.box {
_display: inline; / fix double margin /
float: left;
margin-left: 20px;
}
.container {
overflow: hidden;
zoom: 1; / triggering hasLayout */
}
```
8.3. Expression
[强制] 禁止使用 Expression。