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。