css-in-js

1.2 CSS Modules

• CSS Modules: 一个 CSS 文件就是一个独立模块，核心思想是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外

• CSS Modules 允许我们像 import 一个 JS Module 一样去 import 一个 CSSModule 每一个 CSS 文件都是一个独立模块，每个类名都是该模块所导出对象的一个属性。通过这种方式，便可在使用时明确指定所引用的 CSS 样式。并且，CSS Modules 在打包时会自动将 id 和 class 混淆成全局唯一的 hash 值，从而比 i 按发生命名冲突问题。

• 使用 CSS Modules 时，退件配合 CSS 预处理（Sass/Less/Stylus）一起使用

• CSS 预处理器提供了许多有用的功能，如嵌套，变量，mixins，functions 等，同时也让定义本地名称或全局名称变得容易

  1.3 CSS-in-JS

• React 的出现，打破了以前关注分离的网页开发原则，因其采用组件结构，而组件又强制要求将 HTML,CSS 和 JS 代码写在一起，表面上看是技术的倒退，实际上并不是

• React 是在 JS 中实现了对 HTML 和 CSS 的封装，赋予了 HTML 和 CSS 权限的编程能力，对于 HTML，衍生了 JSX 这种 JS 的语法扩展，你可以将其理解未 HTML-in-JS；对于 CSS，衍生除一系列的第三方库，用来加强在 JS 中操作 CSS 的能力，它们被称为 CSS-in-JS

• 随着 React 的流行以及组件化开发模式的深入人心，这种关注点混合的新写法逐渐称为主流

• 实现

  • styled-components 36.7k
  • emotion 15k

1.13.1 案例

npm install @emotion/css --save

对象支持：