Taro3中CSS防污染大作战

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」

前言

---

前段时间费劲巴拉的，终于将项目的底层框架和业务组件库都成功的升级到了Taro3（真的不容易啊）。可是帅不过三秒啊，还没有高兴多久，就发现了一个严重问题，CSS样式污染了。纳尼？这我心中万马奔腾，这不是玩人吗？经过一番仔细的翻找，发现了问题所在。

Taro3 样式污染的真凶

---

1. Taro3方面

在 Taro Next 中，没有 [组件的外部样式和全局样式] 的概念，组件的配置（config.js）是无效的，页面和入口文件引入的 CSS 都会变成全局 CSS ，没有了 externalClasses 和 addGlobalClass 这两个概念。

好家伙，说升就升，说没就没呀。

2. 自身原因

进行业务开发的时候，过于依赖之前样式的局部作用域，而没有进行严格遵守的CSS样式开发规范。进行样式定义的时候即没有赋予一定的权重，也没有使用祖先选择器进行嵌套。当然了，更没有使用BEM命名规范进行处理。

Taro3 样式探索

1. 全局样式

上来先试一下官方所说的全局样式到底是什么鬼？是组件和页面的样式可以互相作用了吗？还是只是单纯的页面样式可以作用于组件。

    // index.scss
    .index {
      background: pink;
    }

    .demo {
      background: green;
    }

    // demo.scss
    .index {
      background: red;
    }

    .demo {
      background: yellow;
    }
复制代码

效果如下：

好家伙果然是互相作用啊。既然知道了怎么回事了，那就要想办法开整了。

CSS Module

小编充分发挥了程序猿吃苦耐劳，办法总比困难多的艰苦奋斗精神，最后还是整出好方法来了。

首先，我发现了官方给的提示信息：

如果你需要带作用域的 CSS，可以考虑使用 CSS Modules

好家伙，既然有了方向，那就离彻底解决问题不远了。

第一步：我们可以通过CSS Modules来隔离组件样式，这样首先可以消除组件样式对页面样式的影响，顺带连组件之间的互相也影响也消除了；这不就搞定了一半了嘛，so easy！

第二步：这最后的一公里相对来说比较难走哈。经过一番研究发现两种可行的方案：

1. 定义className属性，通过传参的方式将样式名传入组件内，然后通过复写传入的className

2. 组件标签上除了使用 CSS Module 的同时，使用className，在页面内复写className

经过一番思考，我最终采用了第二种方案，理由相对简单，就是省事。那废话就不多说了，我们来上代码看一下效果吧。css文件没有变动，变动点只有js文件

    // demo.tsx
    import style from './index.module.scss'

    <View className={`${style.demo} demo`}>demo</View>
复制代码

再看一下效果图，符合我们的预期：

结尾

好家伙，经过这一番折腾，我终于确定下来了Taro3中样式使用规则：

1. 页面文件中，通过使用权重和父选择器嵌套解决样式污染问题

2. 组件文件中，通过使用 CSS Module 来实现样式隔离，然后通过添加clssName以支持页面文件进行样式复写。

好啦，这篇文章就到这里了，希望对大家的开发有所帮助。欢迎小伙伴在下方点赞留言关注。