避免全局样式污染是确保 CSS 样式可维护、可复用且不会意外影响其他部分的关键。以下是一些常见的方法和最佳实践：
1. 使用 CSS 模块
- CSS Modules：每个 CSS 文件只对其作用的组件生效，样式局部化，避免全局污染。例如，在使用 CSS Modules 的项目中，样式只会影响导入了该模块的组件。
2. 使用命名空间
- 命名空间：为类名添加前缀，或使用更具描述性的命名空间，避免类名冲突。例如，使用
Button__primary 而不是 .primary。
3. CSS-in-JS
- CSS-in-JS：使用如
styled-components 或 emotion 这样的库将 CSS 和 JavaScript 结合，样式与组件绑定，不会全局污染。
4. Scoped CSS
- Scoped Styles：在 Vue.js 等框架中，使用
<style scoped> 将样式限制在组件内部，只影响当前组件的 DOM 元素。
5. BEM 方法论
- BEM（Block Element Modifier）：遵循 BEM 方法论编写 CSS 类名，使类名具有更高的特异性，避免样式冲突。例如，
.block__element--modifier。
6. CSS 预处理器
- CSS 预处理器：使用 Sass、Less 等预处理器来组织样式，通过嵌套、变量和混合宏提高样式管理能力，减少全局样式污染。
7. 避免通配符选择器
- 限制通配符选择器使用：避免使用
* 选择器，这会影响所有元素，增加样式污染的风险。
8. 使用 CSS 变量
- CSS Variables：通过定义 CSS 变量（自定义属性），确保样式在组件中可控，并减少全局样式的影响。
9. 合理使用继承
- 继承：尽量避免深层次的样式继承。使用明确的选择器来减少继承的副作用。
10. 分离结构与样式
- 分离结构与样式：尽量将结构和样式分离，保持 CSS 文件的简洁和模块化。
示例：CSS Modules
// Button.module.css
.button {
background-color: blue;
color: white;
}
// Button.js
import React from 'react';
import styles from './Button.module.css';
const Button = () => (
<button className={styles.button}>Click me</button>
);
export default Button;
