了解CSS in JS(JSS)以及在React项目中配置并使用JSS

目录

• 认识JSS
  • 什么是JSS
  • JSS 的常见实现
  • JSS 的好处与坏处
    • 好处
    • 坏处
• 使用模块化CSS实现JSS
  • 安装插件
  • 在React项目中的tsconfig.json中添加配置
  • vscode项目中添加配置

认识JSS

什么是JSS

简单来说，一句话概括CSS in JS (JSS)，就是"行内样式"（inline style）和"行内脚本"（inline script）。

因为，自从React出现以后，基于组件化的要求，强制把HTML、CSS、JavaScript捆绑在一起，在同一个文件里面，封装了结构、样式、以及逻辑。这虽然违背html发明初期的"关注点分离"的原则，但更有利于组件之间的隔离。而每个组件包含了所有需要用到的代码，不必依赖外部环境，组件之间没有耦合。所以，随着 React 的走红和组件模式深入人心，“关注点分离”原则越发淡出人们的视野，而React所带来的"关注点混合"的原则逐渐成为主流。

React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象。CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in-JS不是一种很新的技术，可是它在国内普及度好像并不是很高，它当初的出现是因为一些component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案。

JSS 的常见实现

由于React 对 CSS 的封装非常弱，导致出现了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。根据不完全统计，各种 CSS in JS 的库至少有47种。

1. Styled-components
2. 使用模块化css

JSS 的好处与坏处

以下总结自知乎/进击的大葱/Css in JS 的好与坏

好处

1. 局部样式 - Scoping Styles
2. 避免无用的CSS样式堆积
3. Critical CSS
4. 基于状态的样式定义
5. 封装得更好的组件库

坏处

1. 陡峭的学习曲线

2. 运行时消耗

3. 代码可读性差

4. 没有统一的业界标准

使用模块化CSS实现JSS

安装插件

npm install typescript-plugin-css-modules --save-dev

在React项目中的tsconfig.json中添加配置

vscode项目中添加配置

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

如此一来我们便能在项目中使用JSS并且有智能提示