React中的CSS方案

内联样式

• 内联样式是官方推荐的一种css样式的写法
  • style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是CSS 字符串
  • 并且可以引用state中的状态来设置相关的样式
• 内联样式的优点
  • 内联样式，样式之间不会有冲突
  • 可以动态获取当前state中的状态
• 内联样式的缺点
  1. 写法上都需要使用驼峰标识
  2. 某些样式没有提示
  3. 大量的样式， 代码混乱
  4. 某些样式无法编写(比如伪类/ 伪元素)

普通的CSS文件

昔通的css我们通常会编号到一个单独的文件，之后再进行引入。

这样的编写方式和普通的网页开发中编马方式是一致的：

• 如果我们按照昔通的网页标准去编写，那么也不会有太大的问题
• 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响
• 但是普通的css都属于 全局的cs5，样式之间会相互影响
• 这种编写方式最大的问题是样式之间会相互层叠掉

CSSmodule

• cssmodules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。

• 如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置webpack.configjs中的modules: true等。

• React的脚手架己经内置了css modules的配置：

  • .css/.less/ scss 等样式文件都需要修改成.module-css/,module less/.module.scss 等,之后就可以引用并且进行使用了；

• css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。

• 但是这种方案也有自己的缺陷：

  • 引用的类名，不能使用连接符(.home-title)，在Javascript中是不识别的

  • 所有的className都必须使用(style.className} 的形式来编写

  • 不方便动态来修改某些样式，依然需要使用内联样式的方式

CSS in JS

• 官方文档也有提到过CSS in JS这种方案：

  • “CSS-in-s”是指一种模式，其中CSS 由Javascript 生成而不是在外部文件中定义
  • 注意此功能并不是React 的一部分，而是由第三方库提供
  • React 对样式如何定义并没有明确态度

• 在传统的前端开发中，我们通常会将结构 （HTML)、样式 （CSS） 、逻辑 (JavaScript）进行分离。

• React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。

  • 样式呢？样式也是属于UI的一部分
  • 事实上CSS-in-JS的模式就是一种将样式 （CSS）也写入到avascript中的方式，并且可以方便的使用JavaScript的状态
  • 所以React有被人称之为 All in JS

• 当然，这种开发的方式也受到了很多的批评：Stop using CSS in JavaScript for web development | HackerNoon

• 批评声音虽然有，但是在我们看来很多优秀的CSS-in-S的库依然非常强大、方便：

  • CSS-in-JS通过)avascript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等
  • 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点
  • 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案

  目前比较流行的CSS-in-JS的库有哪些呢？

  • styled-components
  • emotion
  • glamorous