css 编码指南
# css 规范
# 代码格式化
样式书写一般有两种: 一种是紧凑格式(Compact)
.jdc{display: block;width: 50px;}
一种是展开格式(Expanded)
.jdc {
display: block;
width: 50px;
}
2
3
4
团队约定
统一使用展开格式书写样式
# 代码大小写
样式选择器, 属性名, 属性值关键字全部使用小写字母书写, 属性字符串允许使用大小写.
/* 推荐 */
.jdc {
display: block;
}
/* 不推荐 */
.JDC {
display: BLOCK;
}
2
3
4
5
6
7
8
9
# 代码连接符号
统一使用 - 连接代码
/* 推荐 */
.jdc-top {
display: block;
}
/* 不推荐 */
.jdc_top {
display: block;
}
.jdcTop {
display: block;
}
2
3
4
5
6
7
8
9
10
11
12
13
# 选择器
- 尽量少用通用选择器
* - 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p {}
/* 不推荐 */
* {}
#jdc {}
.jdc div {}
2
3
4
5
6
7
8
9
10
11
12
13
14
# 代码缩进
统一使用两个空格进行代码缩进, 使得各编辑器表现一致(各编辑器有相关配置)
.jdc {
width: 100%;
height: 100%;
}
2
3
4
# 分号
每个属性声明末尾都要加分号;
.jdc {
width: 100%;
height: 100%;
}
2
3
4
# 代码易读性
左括号与类名之间一个空格, 冒号与属性值之间一个空格
推荐:
.jdc {
width: 100%;
}
2
3
不推荐:
.jdc{
width:100%;
}
2
3
逗号分隔的取值, 逗号之后有一个空格
推荐:
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
2
3
不推荐:
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
2
3
为单个 css 选择器或新申明开启新行
推荐:
.jdc,
.jdc-logo,
.jdc-hd {
color: #ff0;
}
.nav {
color: #fff;
}
2
3
4
5
6
7
8
9
不推荐:
.jdc,.jdc-logo,.jdc-hd {
color: #ff0;
}.nav{
color: #fff;
}
2
3
4
5
属性值十六进制数值能用简写的尽量用简写
推荐:
.jdc {
color: #fff;
}
2
3
不推荐:
.jdc {
color: #ffffff;
}
2
3
不要为 0 指明单位
推荐:
.jdc {
margin: 0 10px;
}
2
3
不推荐:
.jdc {
margin: 0px 10px;
}
2
3
# 属性值引号
css 属性值需要用到引号时, 统一使用单引号
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: "Hiragino Sans GB";
}
2
3
4
5
6
7
8
9
# 属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mozilla 官方属性顺序推荐 (opens new window)
# CSS3 浏览器私有前缀写法
CSS3 浏览器私有前缀在前, 标准前缀在后
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
2
3
4
5
6
7
更多关于浏览器私有前辍写法:#Vendor-specific extensions (opens new window)
# 注释规范
CSS 注释规范写法应该遵循以下标准:
Comments begin with the characters
/*and end with the characters*/. They may occur anywhere outside other tokens, and their contents have no influence on the rendering. Comments may not be nested.
- 注释以字符
/*开始, 以字符*/结束 - 注释不能嵌套
/*Comment Text*/
# 单行注释
注释内容第一个字符和最后一个字符都是一个空格字符, 单独占一行, 行与行之间相隔一行
推荐:
/* Comment Text */
.jdc {
}
/* Comment Text */
.jdc {
}
2
3
4
5
6
7
不推荐:
/*Comment Text*/
.jdc {
display: block;
}
.jdc {
display: block;/*Comment Text*/
}
2
3
4
5
6
7
8
# 模块注释
注释内容第一个字符和最后一个字符都是一个空格字符, /* 与 模块信息描述占一行, 多个横线分隔符 - 与 */ 占一行, 行与行之间相隔两行
推荐:
/* Module A
---------------------------------------------------------------- */
.mod-a {}
/* Module B
---------------------------------------------------------------- */
.mod-b {}
2
3
4
5
6
7
不推荐:
/* Module A ---------------------------------------------------- */
.mod-a {}
/* Module B ---------------------------------------------------- */
.mod-b {}
2
3
4
5
# 文件信息注释
在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息
@charset "UTF-8";
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
2
3
4
5
6
更多关于 CSS 注释:#Comments (opens new window)