CSS编码习惯与规范

CSS编码习惯与规范

（1）文件命名

• 以字母开头，避免数字开头
• 全部用小写，这样的话不容易在引用的时候因为大小写而出错
• 用-来分隔单词，而不是下划线
• 对于压缩过的文件，比如 css 或者 js 文件，使用 .min 代替 -min

 

（2）CSS文件顶部设置编码

• 在 css 文件的最顶部设置编码格式为 utf-8 ，否则有可能使得 css 文件出现乱码

1) ID和Class的命名规范:

• - 全部字母用小写，避免使用驼峰命名法。

• - 使用短横线-来作为连接单词之间的字符，避免使用下划线_

• - 命名近可能语义化，让人一目了然。

2) 尽可能避免使用ID选择器，多用类选择器

3) 避免使用标签进行双重限定

4) 尽可能的精确，但是最好不要超过3级

5) 属性选择器记得使用双引号

 

（3）声明块

声明的顺序、属性和值的写法以及一些个例等

• - 如果包含了 content属性，则应该最优先书写，即写到声明块的最上面。
• - 定位相关的属性，比如position、top、left、z-index、display、float、visibility和overflow、flex等。
• - 布局相关的属性，比如display、float、visibility、overflow、flex和clear等。
• - 盒模型相关的属性，比如width、height、margin、padding、border以及box-sizing等。
• - 文本排版印刷相关的属性，比如font、line-height、vertical-align、text-align和white-space、text-decoration等。
• - 视觉感官上相关的属性，比如color、background、list-style、transform、transition和animation等。

1. 尽可能的使用简写属性

2. 每条声明都以分号结尾

3. 双引号，议需要引号的地方都使用双引号，而不用单引号。

4. 尽量不要使用 !important

5. 值和单位

• - 所有属性和值尽量都用小写，属性值为0的时候，不要带单位。如： padding: 0 10px;
• - 当可能的时候尽量使用三位的十六进制计数法，比如表示颜色的时候。如：color: #f3a;
• - font-weight使用数值化表示方法，用400代替 normal、700代替 bold。如：font-weight: 700;
• - line-height尽量不要带单位，除非必须用px来标定。如：line-height: 1.2;
• - 当属性值是介于0到1之间的小数时，可以直接把0省略。如：opacity: .8;