使用CSS Modules和BEM命名约定可有效避免样式冲突。通过将CSS类名局部作用域化并采用结构化命名，结合CSS自定义属性实现灵活可配置的样式模块，提升代码可维护性与复用性。
在现代前端开发中，CSS 样式冲突是一个常见问题，尤其是在多人协作或大型项目中。模块化引入和命名空间是有效避免样式污染与冲突的关键手段。通过合理组织 CSS 代码结构，可以提升样式的可维护性、可复用性和作用域隔离性。
使用 CSS Modules 实现模块化引入
CSS Modules 是一种将 CSS 类名局部作用域化的技术，它通过构建工具（如 Webpack）将每个 CSS 文件中的类名编译为唯一的标识符，从而防止全局污染。
以 .module.css 命名文件即可启用模块化（具体依赖构建配置）：
Button.module.css.primary {
background: blue;
color: white;
}
.large {
font-size: 18px;
padding: 12px 24px;
}
在组件中导入时，类名会自动映射为局部变量：
立即学习“前端免费学习笔记（深入）”；
Button.jsx
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary + ' ' + styles.large}>提交</button>;
}
构建后，.primary 可能变为 Button_primary__abc123，确保唯一性，彻底避免类名冲突。
采用 BEM 命名约定作为命名空间策略
即使不使用 CSS Modules，规范的命名空间也能显著降低冲突风险。BEM（Block-Element-Modifier）是一种广泛使用的命名方法，通过结构化前缀划分样式作用域。
BEM 的命名格式为：block__element--modifier
-
block：独立的功能模块，如
header、menu -
element：属于 block 的子元素，如
menu__item -
modifier：状态或变体，如
menu__item--active
示例：
.search-form { /* block */ }
.search-form__input { /* element */ }
.search-form__submit { /* element */ }
.search-form__submit--loading { /* modifier */ }
这种命名方式自带“命名空间”效果，不同模块即使有相似结构也不会覆盖彼此样式。
结合 CSS 自定义属性实现可配置的样式模块
为了增强模块的灵活性，可在模块内部使用 CSS 自定义属性（CSS Variables），将主题或动态样式抽离出来，便于复用和定制。
例如：
.card {
--card-padding: 16px;
--card-bg: #fff;
padding: var(--card-padding);
background: var(--card-bg);
border-radius: 8px;
}
在特定场景下覆盖变量：
.card.card--compact {
--card-padding: 8px;
--card-bg: #f9f9f9;
}
这种方式让样式模块既保持封装性，又支持外部定制，适合构建设计系统或组件库。
基本上就这些。模块化引入和命名空间不是非此即彼的选择，实际项目中常结合使用：用 CSS Modules 处理作用域，用 BEM 规范命名结构，再辅以 CSS 变量提升灵活性。这样既能杜绝样式冲突，又能保证代码清晰可维护。
