安利一波無外鏈的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中沒有任何一條外鏈哦，不然這個最重要的優勢就不復存在了喲。