css经常会要做一些调整,最后几番改动下来乱的自己都看不明白,给人感觉很糟糕,因此一开始就有一个标准并严格按照标准来写就真的非常重要了。特别是在比较忙的时候,自己看自己的代码都会觉得太乱了 很遭罪。
因此就需要做出一些优化,高标准严要求哈哈
以下内容整理自稀土掘金中的奇舞周刊
1.内联首屏关键css(视情况而定)
适当的将渲染首屏内容所需的关键CSS内联到HTML中
2.异步加载css
3.文件压缩
4.去除无用CSS
虽然文件压缩能够降低文件大小。但CSS文件压缩通常只会去除无用的空格,这样就限制了CSS文件的压缩比例。那是否还有其他手段来精简CSS呢?答案显然是肯定的,如果压缩后的文件仍然超出了预期的大小,我们可以试着找到并删除代码中无用的CSS。
一般情况下,会存在这两种无用的CSS代码:一种是不同元素或者其他情况下的重复代码,一种是整个页面内没有生效的CSS代码。对于前者,在编写的代码时候,我们应该尽可能地提取公共类,减少重复。对于后者,在不同开发者进行代码维护的过程中,总会产生不再使用的CSS的代码,当然一个人编写时也有可能出现这一问题。而这些无用的CSS代码不仅会增加浏览器的下载量,还会增加浏览器的解析时间,这对性能来说是很大的消耗。所以我们需要找到并去除这些无用代码。
5.有选择的使用选择器
保持简单,不要使用嵌套过多过于复杂的选择器。
通配符和属性选择器效率最低,需要匹配的元素最多,尽量避免使用。
不要使用类选择器和ID选择器修饰元素标签,如h3#markdown-content,这样多此一举,还会降低效率。
不要为了追求速度而放弃可读性与可维护性。
BEM命名法
这个命名方式能使结构更加清晰,但是我觉得写出来看着太反人类了,可以借鉴这个思想,但是目前不会用这个方式。
5.减少使用昂贵的属性
所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价
6.优化重排和重绘