CSS modules 与 React中实践

时间 2019-11-13

标签 css modules react 实践栏目 CSS 繁體版

原文原文链接

最近一直在学习React,看上去蛮简单的内容，其实学习曲线仍是比较高的。css

目前学到css绑定的问题，看到有一篇好的文章，就转过来了。react

CSS 模块化的解决方案有不少，但主要有两类。一类是完全抛弃 CSS，使用 JS 或 JSON 来写样式。Radium， jsxstyle ，react-style 属于这一类。优势是能给 CSS 提供 JS 一样强大的模块化能力；缺点是不能利用成熟的 CSS 预处理器（或后处理器） Sass/Less/PostCSS， :hover 和 :active 伪类处理起来复杂。另外一类是依旧使用 CSS，但使用 JS 来管理样式依赖，表明是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力，API 简洁到几乎零学习成本。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React，只要你使用 Webpack，能够在 Vue/Angular/jQuery 中使用。git

是否是应该添加个😊，学习零成本。github

CSS Modules 模块化方案

CSS Modules 内部经过ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类编程

:import("path/to/dep.css") {
  localAlias: keyFromDep;
  /* ... */
}
:export {
  exportedKey: exportedValue;
  /* ... */
}

但直接使用这两个关键字编程太麻烦，实际项目中不多会直接使用它们，咱们须要的是用 JS 来管理 CSS 的能力。结合 Webpack 的 css-loader 后，就能够在 CSS 中定义样式，在 JS 中导入模块化