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;