写点什么

如何在 React 中优雅的写 CSS

2021 年 3 月 08 日

如何在 React 中优雅的写 CSS

引言


问题:CSS 文件分离 !=  CSS 作用域隔离


看下这样的目录结构:

├── src                                  │   ├──......                   # 公共组件目录│   ├── components              # 组件│   │   └──comA                 # 组件A│   │       ├──comA.js                     │   │       ├──comA.css                      │   │       └── index.js                  │   │   └──comB                 # 组件B│   │       ├──comB.js                     │   │       ├──comB.css                      │   │       └── index.js                  │   ├── routes                  # 页面模块                  │   │   └── modulesA            # 模块A│   │       ├──pageA.js         # pageA JS 代码│   │       ├──pageA.css        # pageA CSS 代码
复制代码

看目录结构清晰明了,由于“ CSS 文件分离 !=  CSS 作用域隔离”这样的机制,如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题,会产生非预期的页面样式渲染结果。


假设我们在组件 A 和组件 B  import 引入 comA.css 和 comB.css。

comA.css

.title {    color: red;}
复制代码

comB.css

.title {    font-size: 14px;}
复制代码

最后打包出来的结果为:

.title {    color: red;}.title {    font-size: 14px;}
复制代码


我们希望,comA.css 两者互不影响,可以发现,虽然 A、B 两个组件分别只引用了自己的 CSS 文件,但是 CSS 并没有隔离,两个 CSS 文件是相互影响的!


随着 SPA 的流行,JS 可以组件化,按需加载(路由按需加载、组件的 CSS 和 JS 都按需加载),这种情况下 CSS 作用域污染的问题被放大,CSS 被按需加载后由于 CSS 全局污染的问题,在加载出其他一部分代码后,可能导致现有的页面上会出现诡异的样式变动。这样的问题加大了发布的风险以及 debugger 的成本。


小编我从写 Vue 到写 React , Vue 的 scoped 完美的解决了 CSS 的作用域问题,那么 React 如何解决 CSS 的作用域问题呢?


解决 React 的 CSS 作用域污染方案:

  • 方案一:namespaces

  • 方案二:CSS in JS

  • 方案三:CSS Modules


方案一:namespaces


利用约定好的命名来隔离 CSS 的作用域


comA.css

.comA.title {    color: red;}.comA .……{    ……}
复制代码

comB.css

.comB.title {    font-size: 14px;}.comB .……{    ……}
复制代码

嗯,用 CSS 写命名空间写起来貌似有点累。

没事我们有 CSS 预处理器,利用 less、sass、stylus 等预处理器,代码依然简洁。


A.less

.comA {    .title {        color: red;    }        .…… {        ……    }}
复制代码

B.less

.comB {    .title {        font-size: 14px;    }        .…… {        ……    }}
复制代码

貌似很完美解决了 CSS 的作用域问题,但是问题来了,假设 AB 组件是嵌套组件。


那么最后的渲染 DOM 结构为:

<div class="comA">    <h1 class="title">组件A的title</h1>    <div class="comB">        <h1 class="title">组件组件的title</h1>    </div></div>
复制代码

comA 的样式又成功作用在了组件 B 上。


没关系,还有解,所有的 class 名以命名空间为前缀。

<div class="comA">    <h1 class="comA__title">组件A的title</h1>    <div class="comB">        <h1 class="comB__title">组件组件的title</h1>    </div></div>
复制代码


A.less

.comA {    &__title {        color: red;    }}
复制代码

B.less

.comB {    &__title {        font-size: 14px;    }}
复制代码

如果,我们的样式还遵循 BEM (Block, Element, Modifier) 规范,那么,样式名简直不要太长!但是问题确实也解决了,但约定毕竟是约定,靠约定和自觉来解决问题毕竟不是好方法,在多人维护的业务代码中这种约定来解决 CSS  污染问题也变得很难。


方案二:CSS in JS


使用 JS 语言写 CSS,也是 React 官方有推荐的一种方式。


从 React 文档进入 https://github.com/MicheleBertoli/css-in-js ,可以发现目前的 CSS in JS 的第三方库有 60 余种。


看两个比较大众的库:

  • reactCSS

  • styled-components

reactCSS


支持 React、Redux、React Native、autoprefixed、Hover、伪元素和媒体查询(http://reactcss.com/)


看下官网文档 :

const styles = reactCSS({  'default': {    card: {      background: '#fff',      boxShadow: '0 2px 4px rgba(0,0,0,.15)',    },  },  'zIndex-2': {    card: {      boxShadow: '0 4px 8px rgba(0,0,0,.15)',    },  },}, {  'zIndex-2': props.zIndex === 2,})
复制代码


class Component extends React.Component {  render() {    const styles = reactCSS({      'default': {        card: {          background: '#fff',          boxShadow: '0 2px 4px rgba(0,0,0,.15)',        },        title: {          fontSize: '2.8rem',          color: this.props.color,        },      },    })    return (      <div style={ styles.card }>        <div style={ styles.title }>          { this.props.title }        </div>        { this.props.children }      </div>    )  }}
复制代码

可以看出,CSS 都转化成了 JS 的写法,虽然没有学习成本,但是这种转变还是有一丝不适。


styled-components


styled-components,目前社区里最受欢迎的一款 CSS in JS 方案(https://www.styled-components.com/)


const Button = styled.a`  /* This renders the buttons above... Edit me! */  display: inline-block;  border-radius: 3px;  padding: 0.5rem 0;  margin: 0.5rem 1rem;  width: 11rem;  background: transparent;  color: white;  border: 2px solid white;  /* The GitHub button is a primary button   * edit this to target it specifically! */  ${props => props.primary && css`    background: white;    color: palevioletred;  `}`render(  <div>    <Button      href="https://github.com/styled-components/styled-components"      target="_blank"      rel="noopener"      primary    >      GitHub    </Button>    <Button as={Link} href="/docs" prefetch>      Documentation    </Button>  </div>)
复制代码


方案三:CSS Modules


利用 webpack 等构建工具使 class 作用域为局部。


CSS 依然是还是 CSS,例如 webpack,配置 css-loader 的 options modules: true。

module.exports = {  module: {    rules: [      {        test: /\.css$/,        loader: 'css-loader',        options: {          modules: true,        },      },    ],  },};
复制代码

modules 更具体的配置项参考:https://www.npmjs.com/package/css-loader

loader 会用唯一的标识符 (identifier) 来替换局部选择器。所选择的唯一标识符以模块形式暴露出去。


示例: webpack css-loader options

options: {  ...,  modules: {    mode: 'local',    // 样式名规则配置    localIdentName: '[name]__[local]--[hash:base64:5]',  },},...
复制代码

App.js

...import styles from"./App.css";...<div>  <header className={styles["header__wrapper"]}>    <h1 className={styles["title"]}>标题</h1>    <div className={styles["sub-title"]}>描述</div>  </header></div>
复制代码

App.css

.header__wrapper {  text-align: center;}
.title { color: gray; font-size: 34px; font-weight: bold;}
.sub-title { color: green; font-size: 16px;}
复制代码

编译后端的 CSS,classname 增加了 hash 值。

.App__header__wrapper--TW7BP {  text-align: center;}
.App__title--2qYnk {  color: gray;  font-size: 34px;  font-weight: bold;}
.App__sub-title--3k88A {  color: green;  font-size: 16px;}
复制代码


总结


(1)如果是 ui 组件库中使用


建议使用 namespaces 方案


原因:

  • ui 组件库维护人员基本固定,遵守约定的规范较为容易,可通过约定规范来解决不同组件 CSS 相互影响问题

  • 由于 ui 组件库会应用于整个公司的产品,在真正的业务场景中,虽然不建议,但是可能无法避免需要覆盖组件样式的特殊场景,如使用其他两种方式,不能支持组件样式覆盖


(2)如果是业务代码/业务组件中使用


CSS in JS  / CSS Modules


业务代码维护人员较多且不固定、代码水平不一致,只通过规范来约束不靠谱,无法保证开发人员严格遵守规范,不能根治 CSS 交叉影响问题,但是从 debug 角度考虑,建议组件外层都添加一个 namespaces 方面定位组件。然后加之 CSS in JS 或 CSS Modules 方案来解决 CSS 交叉影响问题。


CSS in JS 和 CSS Modules 谁优谁胜?


CSS Modules 会比 CSS in JS 的侵入性更小,CSS in JS 可以和 JS 共享变量,但个人更喜欢 CSS Modules ,但是谁优谁胜无法武断。


  • 如果你的团队还没有使用这任一技术,需要考虑的是团队成员的感受

  • 如果已经在使用其中某一种方案,保持一致性即可,相信并这样走下去



头图:Unsplash

作者:七喜

原文:https://mp.weixin.qq.com/s/c0zbwrqDQOAhwZulNV4Dtw

原文:如何在 React 中优雅的写 CSS

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 3 月 08 日 23:521777

评论 2 条评论

发布
用户头像
如果你更喜欢vue的scope方案也可以在react里用——scoped-css-loader
2021 年 03 月 12 日 17:37
回复
用户头像
目前我们微前端项目也遇到了这种问题,我负责的项目是采用的namespace,另一个同学的项目用的 CSS Modules,一次规范对齐会上也谈了这件事是否要保持一致,我们都各有考虑,最后 Leader 的结论也是保持自己项目内风格一致就行
2021 年 03 月 09 日 10:42
回复
没有更多了
发现更多内容

Python进阶——什么是元类?

Kaito

Python

大厂经验:埋点数据质量之埋点验证

阿亮

埋点 数据验证

Appium上下文和H5测试(一)

清菡

App

第一周 架构方法 作业一 「架构师训练营 3 期」

feiyun123

极客大学架构师训练营 架构方法

甲方日常 56

句子

工作 随笔杂谈 日常

市值管理软件,交易平台挂单机器人,做市机器人

WX13823153201

市值管理软件

面试专题-Java基础面试技术

李浩宇/Alex

彻底搞懂 IO 底层原理

vivo互联网技术

Java Netty 服务器 语法

30分钟开发一款抓取网站图片资源的浏览器插件

徐小夕

Java chrome 前端 前端进阶 chrome扩展

在线K歌的发展和优势

anyRTC开发者

音视频 WebRTC RTC sdk

如何基于App SDK快速地开发一个IoT App?

IoT云工坊

App 物联网 sdk 智能家居

上分工具,凭这份《数据结构与算法》核心文档,我“跳”进了字节

Crud的程序员

程序员 架构 算法

About Me

翎君

android

moon不讲武德!!!一个类加载机制给面试官说蒙了!!

moon聊技术

Java JVM 类加载 类加载器

LeetCode题解:169. 多数元素,分治,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

图解 | 不得错过的Binder浅析(二)

哈利迪

android

百度的五年乌镇行旅:AI如何穿越过漫漫时光,成为世界的发展新动能?

脑极体

架构师训练营第 1 期 - 第 9 周 - 学习总结

wgl

极客大学架构师训练营

区块链应用场景有哪些?区块链应用开发

t13823115967

区块链应用场景有哪些 区块链应用开发

【薪火计划】05 - 坦诚是领导力的根基

brave heart

管理

市值管理机器人、自动跑k线机器人开发

t13823115967

市值管理机器人 自动跑k线机器人开发

面试JVM一问三不知??来看看这个

程序员的时光

JVM Java虚拟机

架构师训练营第 1 期 - 第 9 周 - 命题作业

wgl

《华为数据之道》读书笔记:第 2 章 建立企业级数据综合治理体系

方志

数据中台 数据仓库 数字化转型 数据治理

折半查找和插值查找

ilovealt

算法和数据结构

他在滕王阁上醒来,见到智慧视觉第一城

脑极体

MySQL如何实现万亿级数据存储?

冰河

MySQL 分布式 微服务 高可用 mycat

【JAVA】List转换为array

莫问

Web前端如何实现断点续传

QiyihaoLabs

Web 断点续传 upload pl

面试 | 程序猿面试,Elasticsearch被坑被虐的体无完肤...

Java架构师迁哥

经典之作——《数学之美》第二版-吴军

计算机与AI

数学

Leader修炼指“北”:管理路上的大小Boss

Leader修炼指“北”:管理路上的大小Boss

如何在 React 中优雅的写 CSS-InfoQ