javascript - 如何避免css全局污染？

Question

现在遇到一个项目，uniapp开发的微信小程序，之前的所有页面都没有使用scope将css样式私有化，导致css属性全局污染了，现在要开发后续的功能，如何在后续的开发中避免之前css的样式污染？
之前开发的内容不能使用scope将css私有化，因为一旦私有化可能会对某些页面造成影响，现在的情况就是之前的内容不能动，在此基础上开发。
目前想到的办法是在后续开发的功能中，所有的css类名名全部使用当前文件名+类名，这样尽可能的来避免样式重名，在这里想问一下各位有什么好的办法来实现？

Answer 1

scope可以的

Answer 2

如果暂时不想要处理历史页面的话，新开发的页面严格按照 BEM 的命名规则就好了。

或者你额外使用 CSS Modules 给新开发的业务模块增加样式的hash后缀。

BEM — Block Element Modifier
CSS Modules

Answer 3

你的想法是可以的，按照你说的，既然之前的样式不能动，那就只能写好之后的。严格控制选择器，一是通过人为控制命名，二是使用scope，建议两者结合使用。

如果没有那么麻烦，后面项目内容还有很多工作要做，也可以花点时间把之前的代码整整，这样后面写起来也舒心

Answer 4

人为规定各种规则来控制css变量冲突事实证明是徒劳的，只要代码还在不断的增长，就有人会写出冲突的css名称，建议尝试使用tailwindcss这样的css原子化来解决日益膨胀的css代码，但是不知道uniapp使用这样的css框架难度。

Answer 5

要避免CSS全局污染，尤其是在不能修改现有代码库的情况下，你可以采取一些策略来确保新开发的样式不会影响到旧的样式，同时也不会被旧的样式所影响。以下是一些建议：

1. 使用唯一的命名约定：
   正如你提到的，为新开发的样式使用唯一的命名约定是一个好方法。可以通过结合文件名、组件名或功能模块名来创建独特的类名。例如，如果你有一个名为MyComponent的组件，在my-component.vue文件中，你可以使用类名如my-component__header、my-component__content等。
2. 使用CSS模块：
   如果项目支持，可以考虑使用CSS模块。CSS模块会自动将类名本地化，以避免全局污染。虽然你提到之前的代码不能使用scope，但新开发的组件可以考虑使用CSS模块。这样，每个组件的样式都会有一个唯一的命名空间，从而避免样式冲突。
3. 使用CSS-in-JS库：
   使用如styled-components、emotion等CSS-in-JS库也是一个选项。这些库允许你编写组件样式时直接使用JavaScript，并且会自动为每个样式创建唯一的类名，从而避免全局污染。
4. CSS Reset：
   在项目入口文件（如App.vue）的顶部使用CSS Reset来消除浏览器默认样式的影响。这有助于确保你的样式有一个更一致的起点，并减少潜在的样式冲突。
5. CSS隔离：
   如果项目支持，可以考虑使用类似shadow DOM或scoped slots等特性来实现CSS隔离。这些方法可以将一个组件的样式完全封装在其内部，不会影响到其他组件。
6. 代码审查和测试：
   在开发过程中，加强代码审查和测试是非常重要的。确保每次添加新样式时都进行仔细的测试，以检查是否引入了新的全局污染。同时，定期进行代码审查也有助于发现并修复潜在的样式问题。
7. 文档和沟通：
   建立和维护一个关于项目样式约定的文档也是很有帮助的。这样，团队成员都可以清楚地了解如何编写不会造成全局污染的样式，并在必要时进行参考。

最后，请注意，虽然这些策略可以帮助你减少CSS全局污染的风险，但完全避免它可能是非常困难的。因此，建议在进行任何重大更改之前都要进行充分的测试和评估，以确保不会对现有功能造成负面影响。