直接用类名易致全局样式污染，因CSS按层叠规则生效且无文件作用域；BEM通过命名空间划分语义边界；属性选择器可隔离第三方样式；CSS Modules能彻底解决冲突但需构建支持；统一团队命名规范才是关键。
为什么直接用类名容易导致样式污染
全局作用域下，CSS 类名一旦重复，后加载的样式就会覆盖先加载的。尤其在多人协作或集成第三方组件时，.btn、.header 这类通用名极易冲突。浏览器不关心你写在哪个文件里，只按层叠规则（cascade）和优先级（specificity）生效。
- 类名没上下文约束，
.active可能同时被导航、标签页、模态框使用 -
!important滥用会进一步破坏可维护性 - CSS 文件合并后，顺序不可控，覆盖行为更难预测
用 BEM 命名空间固化语义边界
BEM（Block–Element–Modifier）不是银弹，但能从命名上强制划分作用域。核心是让每个类名自带“归属感”，比如 user-card<strong>avatar--large</strong> 明确属于 user-card 模块，不会和 product-listavatar 冲突。
- Block 名必须唯一且具业务含义，避免
container、wrap这类泛化词 - Element 用双下划线
<strong></strong>连接，Modifier 用双短横--，不嵌套层级（如不用user-cardheader__title） - 可配合 CSS 预处理器生成命名空间前缀：
@include ns('user-card') { ... } - 工具链支持：PostCSS 插件
postcss-bem能自动补全或校验命名
用属性选择器或 data-* 隔离第三方样式
当无法修改第三方库源码（如引入了 highlight.js 或 codemirror），靠层级太脆弱（.cm-editor .cm-line 一旦库升级就可能失效），更可靠的是加一层属性锚点：
- 给容器加
data-scope="code-block"，然后写[data-scope="code-block"] .cm-line { ... } - 属性选择器优先级高于类名，且不会被外部同名类干扰
- 比纯层级选择器（如
.my-app .cm-line）更轻量，不依赖父容器类名稳定 - 注意：不要用
[class*="cm-"]这类模糊匹配，易误伤
现代方案：CSS Modules 和 :is() 的务实取舍
CSS Modules 在构建时自动哈希类名（Button_button<strong>F1a2b</strong>），彻底解决命名冲突，但需配套构建工具（Webpack/Vite），且动态 className 拼接要小心（styles[`${prefix}icon`]）。
立即学习“前端免费学习笔记（深入）”；
- 纯静态项目或需兼容 IE11？老老实实用 BEM + 属性锚点更稳妥
- 新项目若支持现代浏览器，
:is(.user-card, .product-card) .title可减少重复书写，但注意:is()不影响 specificity 计算，别指望它提升优先级 - Shadow DOM 是终极隔离，但成本高，适合 Web Component 场景，普通页面大范围使用反而增加调试难度
真正难的不是选哪种方案，而是团队能否统一命名习惯、守住 scope 边界。一个没加命名空间的 .loading 类，可能让三周后的某个深夜排查变成一场灾难。
