5大頂尖數字貨幣交易所（合約交易）換膚方案淺談

網頁最多見的換膚方案

方法	特色
用class 命名空間	簡單，無學習成本
準備多套css 主題	命名空間的進階版，無學習成本
利用CSS預處理生成多套主題樣式	開發快速，須要學習對應的語法以及打包處理
CSS IN JS 換膚	上手簡單，有學習成本
CSS變量換膚	比較新穎的換膚技術

---

5大交易所使用的換膚方案

Huobi/OKEX 合約界面-換膚方案

• 很是原始的換膚手段，經過定義多個class命名覆蓋的方式進行

優勢：簡單，好理解，好實現，無額外學習成本
缺點：命名空間會提升css 優先級，代碼臃腫，樣式不易管理，後期維護困難

BINANCE 合約界面-換膚方案

• 利用 CSS IN JS 的便捷性進行主題的更換，（就是將樣式寫到js中，不是具體的庫，而是一種方案的實現）通常是動態生成到style標籤中

優勢：方便，很是符合React的開發思想，進行組件的隔離，能夠書寫組合函數...
缺點：樣式很差複用；樣式越大，須要的運算就越多

BitMEX 合約界面-換膚方案

沒想到其貌不揚的界面下，隱藏着一顆躁動的心

• 使用多套css主題跟css變量的方式進行換膚

• 利用 Link 標籤的 rel 屬性，進行多套皮膚的切換

優勢：css變量的優勢是支持運行時動態更改值，一套樣式，使用簡單；css 多套主題的優勢，簡單，好理解，好實現。
缺點：css變量的缺點是瀏覽器的低版本支持還不是很好，瀏覽器上顯示的是變量名，對照樣式時不直觀；css多套主題的缺點是文件太大，須要拆分，每增長一個主題，就得增長一套皮膚(書寫一套css樣式)。

KuCoin 合約界面(KuMEX)-換膚方案

• 利用CSS預處理生成多套主題樣式進行換膚

優勢：工具進行處理，css編寫速度更快，擴展性更強
缺點：每增長一個皮膚，就得增長一個對應名字的文件...

總結：以上每種方案都各有其優缺點，可是Huobi/OKEX的方案太原始，是如今前端工程化下所不能接受的。

---

DEMO 演示

css變量擴展雜談

• 怎麼定義備用屬性

須要增長postcss-custom-properties這個插件

css變量+css預處理器(less方案)

• 利用less(Mixins)便捷生成備用屬性

css變量+css-vars-ponyfill

• 利用第三方庫，生成備用屬性

END 總結

• 在項目中，推薦使用css變量+less的方案，好處是樣式複用簡單，樣式跟代碼能分離開，比較符合我們目前代碼的改造，JS代碼比較純粹，開發比較快速，不用書寫過多的props。