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

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

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. 没有了跨域问题

例如字体文件是有跨域问题的，走内联则没有这个困扰。

3. 没有合并的成本

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

无外链的CSS开发实践

一般，CSS文件中主要外链资源是小图标，因此，处理好小图标，CSS也就能够告别外链。

1. 告别PNG图形，所有使用矢量图形。
2. 优先使用SVG Sprites技术，CSS中不出现小图标。
3. 若是项目比较小，使用的图标很少，不必使用仍是有些维护成本的SVG Sprites技术。则优先尝试CSS绘制图标，咱们不必本身写，能够直接复制别人已经写好的CSS图标便可。关于这个，能够参见我上周专门为此整理的“常见纯CSS图标的代码分离与整理”，文档介绍参见这里。
4. 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中没有任何一条外链哦，不然这个最重要的优势就不复存在了哟。