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

认识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中添加配置

image-20210812165418120

vscode项目中添加配置

image-20210812165500952

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

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

posted @ 2021-08-12 17:02  bleso  阅读(253)  评论(0编辑  收藏  举报