一、拜拜IE8，蘋果香蕉大西瓜
想想看現在都什麼年代了，我家小朋友都已經會打醬油了，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檔案體積啦。”
沒有但是！現在什麼年代了，5G時代都要來了，寬帶速度多塊，一個小小CSS檔案，再怎麼狂妄，其增加的體積抵得上一個短視訊嗎，抵得上一張圖檔嗎？
20K的CSS檔案和50K的CSS檔案完全就沒有差別，如果你真的對流量很在意，好好把你網站的圖檔壓縮壓縮，那個才是大頭，才是真省錢。
再說了，一次CSS總的請求和之前分開的請求的總大小并沒有變化，相反，有些素材變成字元後反而可以GZIP，體積更小才是。
還有人會疑問：“但是你這樣會影響CSS檔案的渲染性能啦。”
沒有但是！現在什麼年代了，晶片都是7nm的了。渲染都很快的，再說50ms的渲染和100ms的渲染有差異嗎？如果真的對性能很在意，什麼React.js什麼鬼的都删掉，那可真是立竿見影。
是以，是時候了，技術上完全支援，硬體環境也支援，為何不使用好處多多的無外鍊的CSS開發政策呢！
其他但是，源自評論
“請求不是能緩存嗎？緩存的話是不是就更節省資源了呢？”
沒有但是，CSS也可以緩存，取一個緩存肯定比取多個緩存更快喲。
“但我有http2啊”
沒有但是，CSS無外鍊和http2不沖突哦，同樣是http2，CSS無外鍊肯定比有很多連結快喲，如今這個時代，小檔案的性能的瓶頸不是網速，而是發起和接收請求。内聯一定速度最快。當然，差異并不會有多明顯，CSS無外鍊最重要的優點還是獨立無耦合遷移與引用友善。
三、無外鍊的CSS開發政策的好處
1. 節約了大量的請求
你會發現頁面的渲染和呈現速度快了很多，因為頁面渲染的瓶頸往往在于http/https請求上，不是什麼CSS渲染時間哦，我們平常開發的網頁是如此的簡單，那點CSS代碼量的渲染再怎麼蹦上天也沒什麼本質差別的。
節約了大量請求也意味着大大減輕了伺服器的壓力，例如阿裡雲的https CDN是請求數給錢的，這樣處理是不是省了很多的錢？
2. 遷移與引用更友善
由于沒有任何外鍊，你寫的這套樣式布局或者元件想給别人使用，很簡單，隻要把CSS檔案拷過去就好了。但是如果是傳統的那種外鍊實作，還需要把靜态圖檔資源一起拷過去，成本就高了。這是我力推無外鍊的CSS開發最重要的原因，真的很舒心。
3. 沒有了跨域問題
例如字型檔案是有跨域問題的，走内聯則沒有這個困擾。
4. 沒有合并的成本
以前為了節約點http請求，小圖示還合在一起，無外鍊CSS開發直接圖示合并在CSS中，無需額外功夫，開發更輕松更便捷。用到哪個圖示，複制粘貼下就好了，輕輕松松又高性能，不要太棒哦！
四、無外鍊的CSS開發實踐
通常，CSS檔案中主要外鍊資源是小圖示，是以，處理好小圖示，CSS也就可以告别外鍊。
- 告别PNG圖形，全部使用矢量圖形。
- 優先使用SVG Sprites技術，CSS中不出現小圖示。
- 如果項目比較小，使用的圖示不多，沒必要使用還是有些維護成本的SVG Sprites技術。則優先嘗試CSS繪制圖示，我們沒必要自己寫，可以直接複制别人已經寫好的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轉義内聯等：
如果有小圖示以外的其他圖形也是類似處理。
五、告别代碼精神潔癖
CSS檔案中會多處出現好幾K的内聯圖示代碼，很多人會看了難受。其他CSS屬性都是短短的，就你長長的；其他CSS屬性都看得懂，就你不知所雲，給人感覺代碼很不協調。
這種感受人之常情，可以了解。
但是，我們都已經是成熟的前端開發了，我們追求的是收益，追求的是價值，美感和藝術都是次要的。這種不協調放寬心，忍一忍就過去了。
當然，如果你實在看不下去，也不是沒有什麼解決辦法，可以把内聯的一串字元折疊起來，這樣不就眼不見心不煩了。
六、結束語
無外鍊的CSS開發政策需要一個外鍊資源都沒有，隻要有一個出現，其最大的轉移友善優點就不複存在。
這種政策适合正常的功能性的産品開發，也就是我們平時使用的各種應用，對于花裡胡哨的營運活動這種場景就不适合，有太多的大大的背景圖檔了。
另外，雖然很多資源都内聯在了CSS檔案中，但是，原始的圖形資源還是需要儲存與歸檔。這樣友善日後的維護，比方說你把某個小圖檔變成了base64，誰要在再原成原始圖檔，還是需要點時間折騰下的，但是如果原始素材就在項目中，則顯然無需這樣折騰。
與時俱進，擁抱變化，為了更快更強，無外鍊CSS開發走起！
作者 | 張鑫旭