javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈

网页最常见的换肤方案

方法 特点
用class 命名空间 简单,无学习成本
准备多套css 主题 命名空间的进阶版,无学习成本
利用CSS预处理生成多套主题样式 开发快速,需要学习对应的语法以及打包处理
CSS IN JS 换肤 上手简单,有学习成本
CSS变量换肤 比较新颖的换肤技术
5大交易所使用的换肤方案 Huobi/OKEX 合约界面-换肤方案
  • 非常原始的换肤手段,通过定义多个class命名覆盖的方式进行
javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈
文章图片

优点:简单,好理解,好实现,无额外学习成本
缺点:命名空间会提高css 优先级,代码臃肿,样式不易管理,后期维护困难
BINANCE 合约界面-换肤方案
  • 利用 CSS IN JS 的便捷性进行主题的更换,(就是将样式写到js中,不是具体的库,而是一种方案的实现)一般是动态生成到style标签中
javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈
文章图片

优点:方便,非常符合React的开发思想,进行组件的隔离,可以书写组合函数...
缺点:样式不好复用;样式越大,需要的运算就越多
BitMEX 合约界面-换肤方案
没想到其貌不扬的界面下,隐藏着一颗躁动的心
  • 使用多套css主题css变量的方式进行换肤
【javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈】javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈
文章图片

  • 利用 Link 标签的 rel 属性,进行多套皮肤的切换
优点:css变量的优点是支持运行时动态更改值,一套样式,使用简单;css 多套主题的优点,简单,好理解,好实现。
缺点:css变量的缺点是浏览器的低版本支持还不是很好,浏览器上显示的是变量名,对照样式时不直观;css多套主题的缺点是文件太大,需要拆分,每增加一个主题,就得增加一套皮肤(书写一套css样式)。
javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈
文章图片

KuCoin 合约界面(KuMEX)-换肤方案
  • 利用CSS预处理生成多套主题样式进行换肤
javascript|5大顶尖数字货币交易所(合约交易)换肤方案浅谈
文章图片

优点:工具进行处理,css编写速度更快,扩展性更强
缺点:每增加一个皮肤,就得增加一个对应名字的文件...
总结:以上每种方案都各有其优缺点,但是Huobi/OKEX的方案太原始,是现在前端工程化下所不能接受的。
DEMO 演示 css变量扩展杂谈
  • 怎么定义备用属性
需要增加postcss-custom-properties这个插件
css变量+css预处理器(less方案)
  • 利用less(Mixins)便捷生成备用属性
css变量+css-vars-ponyfill
  • 利用第三方库,生成备用属性
END 总结
  • 在项目中,推荐使用css变量+less的方案,好处是样式复用简单,样式跟代码能分离开,比较符合咱们目前代码的改造,JS代码比较纯粹,开发比较快速,不用书写过多的props

    推荐阅读