在前端项目中，CSS 类名冲突几乎是一个绕不开的问题。项目规模较小时，这个问题往往不明显。页面不多，样式文件也集中，开发者对每一个类名都心中有数。但随着页面数量增加、模块拆分变多、多人同时开发，CSS 的全局特性就会逐渐暴露出问题。
针对CSS 类名冲突这个问题，业界逐渐形成了几种比较成熟的解决思路。下面介绍三种方案：BEM、CSS in JS、CSS Module
方案一：BEM
BEM即块（Block）、元素（Element）、修饰符（Modifier）的缩写，是一种 CSS 类名的命名规范。通过这种结构，可以在类名层面区分不同模块以及模块内部的组成部分。
- Block（块） ：独立可复用的功能单元，如按钮、导航栏，命名用简短描述性单词，单词间连字符连接，例如
.header、.button。 - Element（元素） ：Block的组成部分，不可独立存在，命名规则为Block名+双下划线+元素名，例如
.header__logo、.button__text。 - Modifier（修饰符） ：描述Block/Element的状态或样式变体，命名为Block/Element名+单下划线+修饰符名，例如
.button_disabled、.input_error。
例如，在一个轮播图模块中，可以这样编写样式：
.banner {
width: 100%;
}
.banner__item {
display: inline-block;
}
.banner__item--active {
background-color: #f40;
}
BEM 的价值主要体现在可维护性上。当样式规模逐渐变大时，清晰的命名规则可以降低理解成本，也方便多人协作。同时，BEM 不依赖任何构建工具，适用范围比较广。
不过需要注意的是，BEM 仍然是一种“约定型方案”。它无法从技术层面强制隔离样式，一旦规范执行不一致，冲突问题仍然可能出现。
方案二：CSS in JS
在CSS in JS中，CSS不再写在独立的 CSS 文件里，而是通过 JavaScript 对象来描述。 例如：
const styles = {
container: {
padding: '16px'
},
title: {
fontSize: '18px'
}
};
<div style={styles.container}>
<h1 style={styles.title}>标题</h1>
</div>
从上面例子看出，样式是通过 JS 引用的方式应用到组件上的，不存在全局类名，自然也就不存在类名重复的问题。
在实际项目中，CSS in JS 通常不会以这种最原始的形式使用，而是借助一些成熟的库来完成样式管理，例如 styled-components、emotion、JSS 等。这些方案会在内部处理样式生成、注入以及作用域隔离的问题。
CSS in JS 的优势在于它不依赖传统的 CSS 类名，样式直接由 JavaScript 控制，因此不会出现类名冲突的问题。同时，借助 JavaScript 本身的能力，可以更灵活地组合、复用和动态生成样式。
但它的缺点同样明显。样式往往通过内联或运行时注入的方式生效，可能带来一定的冗余代码和调试成本，使最终页面结构的可读性下降。
方案三：CSS Module
CSS Modules是一种模块化的CSS解决方案，它通过构建工具（如Webpack）将样式模块化，从而有效避免类名冲突。CSS Modules的核心思想是为每个CSS类名生成唯一的哈希值，这样即使不同模块中使用相同的类名，最终生成的类名也会不同。
例如，不同文件存在同名类，最终会生成不同hash值。
// style1.css
.button1 {
color: red;
}
// style2.css
.button1 {
color: blue;
}
在Webpack配置中，启用CSS Modules只需在css-loader中设置modules: true即可：
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
],
}
CSS Module能彻底解决类名冲突，通过唯一类名实现样式作用域独立；样式与组件绑定提升可维护性，且沿用原生CSS语法，开发者易上手、开发成本低。其不足在于复杂样式复用需额外适配或配置，编译后类名带哈希值，调试不直观，增加排查难度。
总结
CSS 类名冲突是前端开发中不可回避的问题。BEM 通过统一、可读的命名规则在“约定层面”降低冲突风险；CSS in JS 将样式与组件逻辑绑定，由 JavaScript 生成和管理样式，从机制上规避全局污染；CSS Module 则在编译阶段对类名进行作用域隔离，通过唯一哈希值实现样式的天然私有化。三种方案从不同层面切入，分别在规范、运行时和编译时解决样式冲突问题，共同目标都是提升样式的可控性、可维护性和代码整体质量。
本文首发于公众号 ZTeam，欢迎学习交流
