平时工作中积累了一些 CSS 样式的书写规范，个人觉得每个团队或者个人都会有自己的一套规范逻辑以及最佳实践，这里我只是把自己的一些小经验和你分享一下：
文件引用规范
这里主要是为了提高首屏的速度或者页面加载的速度。
1.CSS 文件或样式在 head 标签中引用，页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。
2.使用压缩后的文件，线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，从而减少下载的时间。
3.减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求，会拖慢 CSS 文件的加载速度。
选择器的书写规范
一、选择器命名规范
- 选择器都用小写字母。
- 选择器的命名要使用英语，这是编程的通用语言。
- 选择器的名字尽量简短，但要有实际意义，不能为了文件的体积而忽略代码的可读性。
- 逗号后要有空格，一般在选择器的逗号后面加一个空格，这样不至于看起来拥挤。
- 使用-分割，如果有需要多个单词的选择器，几个单词中间用-分隔，比如 page-wrap、btn-small 等。
二、选择器使用规范
- CSS 的属性中需要引号的地方使用单引号，HTML 中的属性使用双引号。
- CSS 选择器在使用的时候，要把样式限定在某个 HTML 区域里生效。这样可以防止不同区域的元素互相影响
- 选择器合并。有相同样式的多个选择器，使用分组选择器，可以减小文件的体积。
- 尽量不使用通配选择器或标签选择器。这两种选择器效率比较低，尽量使用类选择器来代替，只有在需要改变元素默认属性的时候再使用。
- 最右侧的选择器尽量精确。选择器中最后一位的选择器尽量使用类选择器这种比较精确的选择器，因为选择器的读取是由右至左，最右边的选择器会先去遍历，如果最后使用了标签选择器，那么查找样式的消耗就会增多。
- 选择器的嵌套不宜太长。选择器在读取的时候都是一层层的去查找的，所以使用太长的选择器也会增加查找的消耗。
- 在可以的情况下用子代选择器代替后代选择器。子代选择器只需要做一层的查找，而后代选择器需要一直查找到根节点，所以子代选择器的效率会更高一点。
- 使用样式继承。对于可以继承的样式，尽量在父节点加入样式，而不要给每一个子节点都加样式。
属性的书写规范
一、使用缩写
在 CSS 中有很多属性或属性值可以缩写，在能用缩写的地方尽量使用缩写。
二、属性顺序的规范
理论上，CSS 的属性是一条一条解析执行的。这种情况下，就要把能确定大小和位置的属性写在前面，把对布局没什么影响的属性写在后面，避免返工。一般说的使用顺序如下:
1. 位置属性 (position, top, right, z-index, display, float等)
2. 大小 (width, height, padding, margin)
3. 文字系列 (font, line-height, letter-spacing, color- text-align等)
4. 背景 (background, border等)
5. 其他 (animation, transition等)三、属性使用的规范
- 不大面积的使用 gif 图片。显示 gif 图片的消耗比较大，所以一个页面里不要大面积使用 gif 图片。
- 尽量不要对图片进行缩放，这也是一个高消耗的操作。
- 减少高消耗属性的使用 box-shadow/border-radius/filter/ 透明度 /:nth-child 等。
- 动画里使用 3D 属性代替一般属性，如使用 transform、scale 等代替原始的 width、height、margin 等，因为这些 CSS3 的属性可以调用 GPU 进行渲染，会减少资源的消耗并提高动画的流畅度。
注释规范
在代码里还有比较特殊的一部分就是注释。这部分内容不参与代码的运行，只是为了提供给开发者看：
一、文件头注释
在文件头部加上注释是为了记录文件的创建者、创建时间、最后更改者和更改时间。这样在一个项目组里，如果遇到开发上的问题，可以直接根据文件头的注释找到这个文件所属人和操作时间。一个 CSS 文件头的注释可以按如下格式:
/*
* @Author: 萝卜
* @Date: 2019-04-18 20:09:21
* @Last Modified by: Rosen
* @Last Modified time: 2019-05-05 10:21:21
*/二、普通注释
在业务里也需要注释，这种注释我们用标准的注释圈起来就行，最好是在注释的文本两边留下个空格，这样不会显得拥挤。如下：
/* 头部导航 */
.nav-top{
background: #ccc;
}我们在书写样式的时候，对于关键位置一定要随手加注释，免得过一阵自己写过的代码都不知道是干什么用的了。
差不多了，就这些吧，希望对你有帮助哈。
