CSS-in-JS 作用以及 小篇章介绍

为什么要用 CSS-in-JS?

  1. 缺乏模块的概念
  2. 缺乏作用域的概念【CSS 类名容易重复、覆盖】
  3. 多选择器作用在同一个元素上、同一个选择器作用在不同的元素上,可能造成混乱
  4. 废弃代码:经常性地会发生,改变了类名,老的类名旧样式扔在代码文件里不会去碰的情况
  5. CSS 样式的顺序、继承、覆盖问题
  6. HTML 和 CSS 实际是强耦合的 (改结构基本意味着改样式)
  7. 选择器太过全能(啥都能选)
  8. 基于状态的样式

参考链接:

  1. What actually is CSS-in-JS?
  2. Why I Write CSS in JavaScript

基本思路

一个组件,对应一个 css 样式。不重复、不覆盖、想删就删 等等。

相应的,最终生成的 CSS 文件可能会更大(包含不少重复样式内容),但是,相对的,可能在某方面降低了后期维护成本、也在某方面增加了扩展成本。

简言: CSS 和 CSS-in-JS 各有优劣,取决于用处、场景,当然,大型项目使用 CSS-in-JS 可能 会更工程化一点。

各种 CSS-in-JS 工具对比

其实都大同小异,如果要用,选型前稍微看下即可,推荐以下两个二选一。

  • Styled-Components
  • Emotion

Emotion 出来最晚,集成了其他库各式各样的特性。

其他参考链接

  1. 9 CSS in JS Libraries you should Know in 2019
  2. Comparing CSS in JS Solutions for React Apps
  3. 精读《请停止 css-in-js 的行为》
  4. React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (上)
  5. React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (中) —— tachyons.css、tailwind.css
  6. React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (下) —— styled-jsx