css规范
缩进
- [强制] 使用 2 个空格 或 tab 字符做为一个缩进层级。
.selector {
margin: 0;
padding: 0;
}
1 空格
- [强制] 选择器 与 { 之间必须包含空格。
/* good */
.select {
}
/* bac*/
.select{
}
- [强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
/* good */
margin: 0;
/* bad*/
margin : 0;
/* bad*/
margin:0;
- [强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。
/* good */
font-family: Arial, sans-serif;
/* bad*/
font-family: Arial,sans-serif;
2 选择器
- [强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
- [建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
- [强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行
/* good */
.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
}
2 属性
- [强制] 属性定义必须另起一行。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
- [强制] 属性定义后必须以分号结尾。
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
- [建议] 在可以使用缩写的情况下，尽量使用属性缩写。
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
-** [建议] 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。**
3 值与单位
3.1单位
- [强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0
/* good */
panel {
opacity: .8;
}
/* bad */
panel {
opacity: 0.8
}
- [强制] 长度为 0 时须省略单位。 (也只有长度单位可省)
/* good */
body {
padding: 0 5px;
}
/* bad */
body {
padding: 0px 5px;
}
3.2 url()
-[强制] url() 函数中的路径不加引号。
body {
background: url(bg.png);
}
- [建议] url() 函数中的绝对路径可省去协议名。
body {
background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
3.3 长度
-** [强制] 长度为 0 时须省略单位。 (也只有长度单位可省)**
/* good */
body {
padding: 0 5px;
}
/* bad */
body {
padding: 0px 5px;
}
3.4 颜色
- 颜色值可以缩写时，必须使用缩写形式。
/* good */
.success {
background-color: #aca;
}
/* bad */
.success {
background-color: #aaccaa;
}
-[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
解释：
带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。
/* 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 {
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;
}
参考
css规范