必须安利一波无外链的CSS开发策略

如果你的项目不需要兼容IE8浏览器，则试试贯彻下面这条CSS开发策略。

学习更多的前端知识，欢迎加入咋们的扣扣群，群豪：791038323
CSS代码中无外链！

也就是不要有任何的http/https请求从CSS文件中发出。

例如我们以前显示一个小图标背景，CSS代码会是这样：
.icon-arrow-down {
background-image: url(./images/arrow-down.svg);
}
贯彻无外链的CSS开发策略则是这样：
.icon-arrow-down {
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ viewBox=‘0 0 24 32’%3E%3Cpath d=‘M12.012 19.676l-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z’%3E%3C/path%3E%3C/svg%3E”);
}
原本外链的图形全部内联。

无外链CSS开发策略的好处

1. 页面渲染速度更快
   素材内联，更少的http/https请求，一定要比很多请求更快。如今这个时代，小文件的性能瓶颈不是流量传输，而是发起请求和接收请求。
2. 迁移与引用更方便
   由于没有任何外链，你写的这套样式布局或者组件想给别人使用，很简单，只要把CSS文件拷过去就好了。但是如果是传统的那种外链实现，还需要把静态图片资源一起拷过去，成本就高了。
   低耦合，迁移与引用方便是我力推无外链的CSS开发最重要的原因，真的很舒心。
3. 没有了跨域问题
   例如字体文件是有跨域问题的，走内联则没有这个困扰。

4 没有合并的成本
以前为了节约点http请求，小图标还合在一起，无外链CSS开发直接图标合并在CSS中，无需额外功夫，开发更轻松更便捷。用到哪个图标，复制粘贴下就好了，轻轻松松又高性能，不要太棒哦！

无外链的CSS开发实践
通常，CSS文件中主要外链资源是小图标，所以，处理好小图标，CSS也就可以告别外链。

告别PNG图形，全部使用矢量图形。

优先使用SVG Sprites技术，CSS中不出现小图标。

如果项目比较小，使用的图标不多，没必要使用还是有些维护成本的SVG Sprites技术。则优先尝试CSS绘制图标，我们没必要自己写，可以直接复制别人已经写好的CSS图标即可。

CSS可以驾驭的图标毕竟有限，此时推荐使用转义格式进行SVG内联，这样方便我们进行颜色设置。

具体步骤如下：

去小图标平台下载，或者设计工具（sketch或者figma）导出SVG原图标，然后打开我做的SVGO压缩工具，把这个图标复制或选择或拖拽进行上传，此时，最右侧一个输入框里面就是转义SVG内联代码：

使用的时候需要url()函数内加上双引号"，例如：

.icon-arrow-down {
background-image: url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ viewBox=‘0 0 24 32’%3E%3Cpath d=‘M12.012 19.676l-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z’%3E%3C/path%3E%3C/svg%3E”);
}

如果你对图标UI造型要求不高，也可以使用这个工具页面里面提供的1500多个小图标：

点击任意一个小图标，可以复制各种形式的内联代码，共四种内联，HTML内联，Base64内联，CSS转义内联等：

如果项目中有常规小图标以外的其他图形也是类似处理。
可能争议的地方

1. 文件体积大了很多

确实，有可能以前10K的CSS，现在变成了100K。但是，我们加载的总资源的体积并没有变大哟，相反，有些素材变成字符后反而可以GZIP，体积更小才是。

然后，如今这个年代，已经是视频流量时代了，小年轻们看视频流量开销眼睛都不眨一下，100K的CSS大小（传输只有30多K），这点体积值得一提吗，完全没有任何影响。

马上要5G时代了，100K的CSS文件就像一粒沙子一样，不值一提，完全不用在意。

2. CSS渲染时间增加

确实，CSS渲染时间会有所增加。但是我们开发的web页面是如此简单，所增加的那点渲染时间完全不值一提。

而且，CSS渲染增加的那点微不足道的时间和节约的请求时间相比更是不值一提。相对于送10个人上学，以前每次运一个人，单程速度60；现在一次运10个人，单程速度50。哪个更省时间不言而喻吧。

新时代应运而生的新策略

现在这个年代，流量已经不值钱，没必要为了点JS，CSS大小锱铢必较了，于是，我们CSS外链资源可以放心内联。

现在这个年代，软件硬件性能都很高，所谓的那点计算与渲染时间真的毛毛雨都算不上，要看到内联节约的时间才是关键。

最后，再提一句，CSS外链最重要的作用还不是性能啊啥的，关键还是保持无耦合，以后维护啊打理啊，更省心，更方便。因此，一定要保证CSS中没有任何一条外链哦，否则这个最重要的优点就不复存在了哟。
感谢原作者给予的支持
原作者：张鑫旭
链接：https://juejin.im/post/5d58b3e3e51d4561e5353922
来源：掘金

扫码加入我们的前端交流群吧，学习更多知识，尽在本群之中。

不扫不知道，一扫学很多。