为什么要用 CSS-in-JS?
- 缺乏模块的概念
- 缺乏作用域的概念【CSS 类名容易重复、覆盖】
- 多选择器作用在同一个元素上、同一个选择器作用在不同的元素上,可能造成混乱
- 废弃代码:经常性地会发生,改变了类名,老的类名旧样式扔在代码文件里不会去碰的情况
- CSS 样式的顺序、继承、覆盖问题
- HTML 和 CSS 实际是强耦合的 (改结构基本意味着改样式)
- 选择器太过全能(啥都能选)
- 基于状态的样式
参考链接:
基本思路
一个组件,对应一个 css 样式。不重复、不覆盖、想删就删 等等。
相应的,最终生成的 CSS 文件可能会更大(包含不少重复样式内容),但是,相对的,可能在某方面降低了后期维护成本、也在某方面增加了扩展成本。
简言: CSS 和 CSS-in-JS 各有优劣,取决于用处、场景,当然,大型项目使用 CSS-in-JS 可能 会更工程化一点。
各种 CSS-in-JS 工具对比
其实都大同小异,如果要用,选型前稍微看下即可,推荐以下两个二选一。
- Styled-Components
- Emotion
Emotion 出来最晚,集成了其他库各式各样的特性。