CSS编码规范

CSS编码规范

1、文件命名

采用 HTML 命名规则。

2、选择器

  • 尽量少用通用选择器 *。

  • 禁止使用 ID 选择器编写样式。

  • 尽可能避免使用属性选择器(例如,[class^=”…”])。属性选择器相较其他选择器对浏览器的性能消耗是巨大的。

  • 属性选择器必须使用双引号。

3、属性的顺序

  • 顺序:定位 > 盒模型 > 文字 > 其他内部属性 > 其他 CSS3 属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
定位属性
z-index,position,float,top,right,bottom,left

盒模型属性
width,height,padding,margin,border

文字属性
font-\*,line-height,text-align,text-decoration....

其他内部属性
overflow,opacity,cursor....

其他 css3 属性
animation,transition,transform....

4、代码编写规范

  • 统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)。

  • 每个属性声明末尾都要加分号。

  • 左括号与类名之间一个空格,冒号与属性值之间一个空格。

  • 逗号分隔的取值,逗号之后一个空格。

  • 每个选择器单独占一行。

  • 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格,且取值不要带有不必要的 0。

  • 属性值十六进制数值能用简写的尽量用简写。

  • 不要为 0 指明单位。

  • 可简写的属性设置多值时,尽量使用简写语法。

  • 可简写的属性设置单值时,尽量不使用简写语法。

  • 尽量不要在 CSS 中使用!important。

  • url()中的路径不添加引号。

  • 避免使用标签选择器编写样式。

1
2
3
4
5
6
7
8
9
.fs,
.fc {
display: block;
width: 50px;
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
color: rgba(255,255,255,.5);
background: #333333;
margin: 0;
}

5、浏览器私有前缀的写法

  • CSS3 浏览器私有前缀在前,标准前缀在后。
1
2
3
4
5
6
7
.fs {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

6、注释

  • 注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行。
1
2
/* Comment Text */
.fs{}
  • 不同人编写的 css 应该加上对应的注释,注明页面说明、作者、日期等信息。
1
2
3
4
5
6
7
8
9
10
11
/**

* @description 说明

* @author 作者

* 修改者(多个人)

* @date 2015-10-10 最后的修改时间

*/

7、重置标签的默认样式

  • 因为不同浏览器对有些标签的默认值是不同的,如果不对 css 初始化往往会出现浏览器之间的页面显示差异,为了让各个浏览器的 CSS 样式有一个统一的基准,使 HTML 元素样式在跨浏览器时有一致性的效果,所以需要重置 css 的默认样式。(以下代码,在使用 fbi 创建项目时会自动生成)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* 清除默认样式 */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: 'Microsoft yahei';
}
ul,
ol,
li,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
dl,
dt,
dd,
input {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
font-weight: normal;
font-style: normal;
font-family: 'Microsoft yahei';
font-size: 14px;
}

a {
cursor: pointer;
}

img {
vertical-align: middle;
border: 0;
}
作者

Jimmy

发布于

2020-08-28

更新于

2023-04-28

许可协议

评论