了解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还有智能提示