前端优化——CSS优化

前面两篇都在说性能优化，整篇的理论性知识，没有任何实践的内容，很不符合我们程序员的风格。而我的初衷是为了我们代码中的优化，不仅仅是指性能上的，还有可维护性这个指标需要我们重视。

在性能上，肯定使用原生 JS 比我们使用 Vue 和 React 性能更好。可我们现在选择工程化开发后，项目中很少会去写 JS 原生的代码，主要还是前端工程化能解决我们业务上的多元化和复杂化，所以我们不会光去考虑性能而忽略代码的维护。

这篇我们就谈一下 CSS 的优化，性能上的优化不外乎就是前面提过的减少阻塞情况，文件压缩，减少文件大小之类的，这里我们主要去谈一下代码端的优化，在性能和维护之间的一个平衡选择。

避免高性能的属性

有一些 css 属性是会比其他属性消耗更多的性能，而我们使用这些属性的时候，一定要慎重选择。

box-shadow
border-radiustransformfilter
复制代码

特别是 filter，需要大量计算，特别占性能。

但是慎用，不代表不用，只是有其他方案选择时，我们要避免使用这种更耗性能的属性。

删除未用的css

删除不必要的 css，显然是会减小相应文件大小，加快页面的加载速度。

1. 在我们开发中，肯定都会复用一些代码，但是其中一些内容是没用到的，在删除元素的同时，需要同时删除相应的样式代码。

2. 在我们代码修改时，也会删除一些代码，样式也是需要一同删掉。

3. 还有我们代码书写时，一些无用 css 代码也是要避免的，比如在设置了 border-top 之后又设置了 border，那这个 border-top 就是无效设置，也是要避免的。

减少代码重复

代码可维护性的最大要素是尽量减少改动时要编辑的地方。

比如我们会选择 rem，em 的方式去替换 px 。这样我们改动父级元素或根元素就可以统一的变动文字，宽高之类和像素有关的大小。有些场景下使用百分比，透明色也会帮助我们减少代码编辑时需要多个地方修改。这种技巧还有很多，如果感兴趣的，可以去看下 CSS揭秘这本书。

选择器的使用

有的代码里面会看到嵌套了很多层的选择器，都知道选择器的解析是从右向左，所以当 css 选择器套的层越多越复杂，会不利于解析，匹配所要花费的时间自然会更多，改动时也会变得不方便。

虽说现代浏览器性能都很强大，但在我们代码使用上还是尽量规范化，因为除了性能，我们还要考虑可维护性。

1. 尽量不要嵌套过多的选择器，保持在三层内最好。

2. id选择器不要再搭配其他选择器，如 .con-list#wrap-head 。

3. 同样类选择器也是如此，不要搭配元素选择器。

4. 通配符选择器性能最差，这样匹配全部元素，是要避免使用的。

css简写

css属性的简写想必大家都是经常使用，background，font，margin 等等，这种可以显著的减少我们的代码量，可在使用中我们也需要考虑一下简写以后，对我们的代码维护是否方便，比如说我们设置

border-width: 10px 10px 10px 0;
复制代码

这个除了左侧边框宽度，其他宽度都是一样的，可能需要我们经常修改，那这样就会改动到3个地方，而下面这种写法

border-width: 10px;border-left-width: 0;
复制代码

就会方便我们经常性的修改，而且可读性也会更好。

所以代码易维护和代码量少是不可兼得的，这二者的平衡就需要我们开发者去衡量。

合理使用简写

background: #fff;background-color: #fff;
复制代码

我们都知道这两行代码是不等价的。

前者简写可以确定背景色为白色，后者的展示式表示单个属性，实际在设置了 background-image 这个属性，这个背景色就不是白色，而是一个渐变图案或者图片之类的东西。所以使用展示式写法不会清除 background 相关的属性，从而干扰到我们要实现的效果。

展示式写法和简写的搭配使用也是非常有用的。

background: url(t.png) no-repeat top right / 2em 2em,            url(r.png) no-repeat bottom right / 2em 2em,            url(l.png) no-repeat bottom left / 2em 2em;
复制代码

这里可以看到 background-size 和 background-repeat 都是重复设置，每次修改就需要改动三个地方。如果只为某个属性提供一个值，是会扩散到列表中的每一项。因此，可以用下面的写法：

background: url(t.png) top right,            url(r.png) bottom right,            url(l.png) bottom left;background-size: 2em 2em;background-repeat: no-repeat;
复制代码

这样修改时就只用改动一个地方即可达到我们想要的。

css变量

css3为我们提供了一个强大的功能自定义属性，也就是变量。我们只需要更改一些我们事先定义好的变量就可以轻松实现各种效果。

 var( <custom-variable-name> , <declaration-value>? )
复制代码

1. custom-variable-name：必填，表示我们定义的变量。

2. declaration-value：可选，当自定义变量值不存在的情况下将使用这个值。

这样使用变量，我们就可以轻松改变项目主题颜色。

继承

css 有很多属性可以继承，这个特性可以帮我们省去很多代码，像我们常用的 font，line-height，text-align，color，cursor 这些都是可以继承属性，这个感兴趣的可以去查一下。

还有一个大家都知道的 inherit 这个关键字，但是却很少去使用它。inherit 可以用在任何 CSS 属性中，用来继承父元素的值，对伪元素来说，会取生成该伪元素的宿主元素。

在实现提示框中的小箭头时，这个就非常实用，可以使用 inherit 自动继承背景和边框颜色，这样一来就可以方便的修改颜色。

招聘

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。