javascript|5大顶尖数字货币交易所（合约交易）换肤方案浅谈 css3|less|postcss|前端

网页最常见的换肤方案

方法	特点
用class 命名空间	简单，无学习成本
准备多套css 主题	命名空间的进阶版，无学习成本
利用CSS预处理生成多套主题样式	开发快速，需要学习对应的语法以及打包处理
CSS IN JS 换肤	上手简单，有学习成本
CSS变量换肤	比较新颖的换肤技术

5大交易所使用的换肤方案 Huobi/OKEX 合约界面-换肤方案

非常原始的换肤手段，通过定义多个class命名覆盖的方式进行

文章图片

优点：简单，好理解，好实现，无额外学习成本
缺点：命名空间会提高css 优先级，代码臃肿，样式不易管理，后期维护困难
BINANCE 合约界面-换肤方案

利用 CSS IN JS 的便捷性进行主题的更换，（就是将样式写到js中，不是具体的库，而是一种方案的实现）一般是动态生成到style标签中

文章图片

优点：方便，非常符合React的开发思想，进行组件的隔离，可以书写组合函数...
缺点：样式不好复用；样式越大，需要的运算就越多
BitMEX 合约界面-换肤方案

没想到其貌不扬的界面下，隐藏着一颗躁动的心

使用多套css主题跟css变量的方式进行换肤

【javascript|5大顶尖数字货币交易所（合约交易）换肤方案浅谈】

文章图片

利用 Link 标签的 rel 属性，进行多套皮肤的切换

优点：css变量的优点是支持运行时动态更改值，一套样式，使用简单；css 多套主题的优点，简单，好理解，好实现。
缺点：css变量的缺点是浏览器的低版本支持还不是很好，浏览器上显示的是变量名，对照样式时不直观；css多套主题的缺点是文件太大，需要拆分，每增加一个主题，就得增加一套皮肤(书写一套css样式)。