CSS 还是 inline-styles ? (React)
tongchia · TongChia · 2016-04-24 15:34:24 +08:00 · 3252 次点击这是一个创建于 3133 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在尝试使用 Material-UI
其样式部分全部使用 inline-styles
一时间有些接受不了 所以又尝试 react-toolbox
虽然功能和完整性上不如 MaterialUI 但回到熟悉的 sass 舒服多了 顿时感觉自己萌萌哒 (･ิω･ิ)
但写了几个组件后 又开始纠结
很多时候 我们需要根据环境来改变组件行为 也就是说 我还需要通过 style 标签来修改组件的动画、布局方式 ... 此时很大一部分 CSS 样式被 inline-styles 覆盖了
...
(・・;)
要不还是再看看 Material-UI
好吧 然后又写了一堆组件
每一个自定义组件里都写了一堆 style 来覆盖它自带的 style
...
(ーー;)
还不是一样
但 Material-UI 利用 Context 向下传递 theme 配置的方式很优雅 顶级父组件的 muiTheme 属性一变 所有组件的样式都变了
( •̀ㅁ•́;)
但 CSS 同样也可以做到一键切换样式 比如顶级元素的 className="light-theme"什么的
但这样浏览器性能是不是很差
(ㆀ˘･з･˘)
CSS 还有个好处就是 CSS-loader(webpack)能输出静态 css 文件 和 js 文件分离 增加 http 加载速度 而且浏览器会提前解析 CSS 文件
(； ･`д･´)
但 js 生成 style 在不同环境下的自适应更加优雅 不仅仅是监听 window resize 比如我想判断 iOS 还是 Android 变更符合用户操作习惯的展示和行为方式 虽然 ionic 用 SCSS 做的很好 但实际上生成的 CSS 规则都带有超级长一串 class
层层嵌套的 class 不仅增加 CSS 文件的体积 性能上也不如 inline-styles 吧
(´-﹏-`；)
(◎o◎)
好纠结 ...
选择困难症 ...
其样式部分全部使用 inline-styles
一时间有些接受不了 所以又尝试 react-toolbox
虽然功能和完整性上不如 MaterialUI 但回到熟悉的 sass 舒服多了 顿时感觉自己萌萌哒 (･ิω･ิ)
但写了几个组件后 又开始纠结
很多时候 我们需要根据环境来改变组件行为 也就是说 我还需要通过 style 标签来修改组件的动画、布局方式 ... 此时很大一部分 CSS 样式被 inline-styles 覆盖了
...
(・・;)
要不还是再看看 Material-UI
好吧 然后又写了一堆组件
每一个自定义组件里都写了一堆 style 来覆盖它自带的 style
...
(ーー;)
还不是一样
但 Material-UI 利用 Context 向下传递 theme 配置的方式很优雅 顶级父组件的 muiTheme 属性一变 所有组件的样式都变了
( •̀ㅁ•́;)
但 CSS 同样也可以做到一键切换样式 比如顶级元素的 className="light-theme"什么的
但这样浏览器性能是不是很差
(ㆀ˘･з･˘)
CSS 还有个好处就是 CSS-loader(webpack)能输出静态 css 文件 和 js 文件分离 增加 http 加载速度 而且浏览器会提前解析 CSS 文件
(； ･`д･´)
但 js 生成 style 在不同环境下的自适应更加优雅 不仅仅是监听 window resize 比如我想判断 iOS 还是 Android 变更符合用户操作习惯的展示和行为方式 虽然 ionic 用 SCSS 做的很好 但实际上生成的 CSS 规则都带有超级长一串 class
层层嵌套的 class 不仅增加 CSS 文件的体积 性能上也不如 inline-styles 吧
(´-﹏-`；)
(◎o◎)
好纠结 ...
选择困难症 ...
 |
1
adspe 2016-04-24 19:38:12 +08:00
既然都 react 直接 CSSmodule 啊。
|
Select Language