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

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!