方法 | 特点 |
---|---|
用class 命名空间 | 简单,无学习成本 |
准备多套css 主题 | 命名空间的进阶版,无学习成本 |
利用CSS预处理生成多套主题样式 | 开发快速,需要学习对应的语法以及打包处理 |
CSS IN JS 换肤 | 上手简单,有学习成本 |
CSS变量换肤 | 比较新颖的换肤技术 |
Huobi/OKEX
合约界面-换肤方案class
命名覆盖的方式进行
优点:简单,好理解,好实现,无额外学习成本
缺点:命名空间会提高css
优先级,代码臃肿,样式不易管理,后期维护困难
BINANCE
合约界面-换肤方案js
中,不是具体的库,而是一种方案的实现)一般是动态生成到style
标签中优点:方便,非常符合React
的开发思想,进行组件的隔离,可以书写组合函数...
缺点:样式不好复用;样式越大,需要的运算就越多
BitMEX
合约界面-换肤方案没想到其貌不扬的界面下,隐藏着一颗躁动的心
css主题
跟css变量
的方式进行换肤Link
标签的 rel
属性,进行多套皮肤的切换优点:css变量
的优点是支持运行时动态更改值,一套样式,使用简单;css 多套主题
的优点,简单,好理解,好实现。
缺点:css变量
的缺点是浏览器的低版本支持还不是很好,浏览器上显示的是变量名,对照样式时不直观;css多套主题
的缺点是文件太大,需要拆分,每增加一个主题,就得增加一套皮肤(书写一套css
样式)。
KuCoin
合约界面(KuMEX
)-换肤方案CSS预处理
生成多套主题样式进行换肤
优点:工具进行处理,css
编写速度更快,扩展性更强
缺点:每增加一个皮肤,就得增加一个对应名字的文件...
总结:以上每种方案都各有其优缺点,但是Huobi/OKEX
的方案太原始,是现在前端工程化下所不能接受的。
css变量
扩展杂谈需要增加postcss-custom-properties这个插件
css变量
+css
预处理器(less
方案)less(Mixins)
便捷生成备用属性css变量
+css-vars-ponyfill
css变量
+less
的方案,好处是样式复用简单,样式跟代码能分离开,比较符合咱们目前代码的改造,JS
代码比较纯粹,开发比较快速,不用书写过多的props
。