谢邀!平时工作中积累了一些 CSS 样式的书写规范,个人觉得每个团队或者个人都会有自己的一套规范逻辑以及最佳实践,这里我只是把自己的一些小经验和你分享一下:
1.CSS 文件或样式在 head 标签中引用,页面的渲染需要 CSS,所以尽量早的让 CSS 文件加载出来。
2.使用压缩后的文件,线上使用的静态文件,尽量都是压缩好的,CSS 使用 .min.css 形式,从而减少下载的时间。
3.减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求,会拖慢 CSS 文件的加载速度。
CSS 选择器在使用的时候,要把样式限定在某个 HTML 区域里生效。这样可以防止不同区域的元素互相影响
尽量不使用通配选择器或标签选择器。这两种选择器效率比较低,尽量使用类选择器来代替,只有在需要改变元素默认属性的时候再使用。
最右侧的选择器尽量精确。选择器中最后一位的选择器尽量使用类选择器这种比较精确的选择器,因为选择器的读取是由右至左,最右边的选择器会先去遍历,如果最后使用了标签选择器,那么查找样式的消耗就会增多。
选择器的嵌套不宜太长。选择器在读取的时候都是一层层的去查找的,所以使用太长的选择器也会增加查找的消耗。
在可以的情况下用子代选择器代替后代选择器。子代选择器只需要做一层的查找,而后代选择器需要一直查找到根节点,所以子代选择器的效率会更高一点。
理论上,CSS 的属性是一条一条解析执行的。这种情况下,就要把能确定大小和位置的属性写在前面,把对布局没什么影响的属性写在后面,避免返工。一般说的使用顺序如下:
在文件头部加上注释是为了记录文件的创建者、创建时间、最后更改者和更改时间。这样在一个项目组里,如果遇到开发上的问题,可以直接根据文件头的注释找到这个文件所属人和操作时间。一个 CSS 文件头的注释可以按如下格式:
在业务里也需要注释,这种注释我们用标准的注释圈起来就行,最好是在注释的文本两边留下个空格,这样不会显得拥挤。如下:
我们在书写样式的时候,对于关键位置一定要随手加注释,免得过一阵自己写过的代码都不知道是干什么用的了。
其次,你要知道一些最佳实践,比如就布局而言,使用flex或者grid就会比你用浮动或者position方便快捷很多。关于布局可以参考:908608
一是单独为每个元素写一份样式,完全不复用,这样每个元素只需要一个 class,而 css 代码量是最多的
二是把每一条不同的样式单独用一个 class 表示,确保整个样式表没有一条重复的样式,这样复用性最高,css 代码最少,但是每个元素就需要配一堆的 class

