直接用类名易致全局样式污染，因CSS按层叠规则生效且无文件作用域；BEM通过命名空间划分语义边界；属性选择器可隔离第三方样式；CSS Modules能彻底解决冲突但需构建支持；统一团队命名规范才是关键。

为什么直接用类名容易导致样式污染

全局作用域下，CSS 类名一旦重复，后加载的样式就会覆盖先加载的。尤其在多人协作或集成第三方组件时，.btn、.header 这类通用名极易冲突。浏览器不关心你写在哪个文件里，只按层叠规则（cascade）和优先级（specificity）生效。

• 类名没上下文约束，.active 可能同时被导航、标签页、模态框使用
• !important 滥用会进一步破坏可维护性
• CSS 文件合并后，顺序不可控，覆盖行为更难预测

用 BEM 命名空间固化语义边界

BEM（Block–Element–Modifier）不是银弹，但能从命名上强制划分作用域。核心是让每个类名自带“归属感”，比如 user-cardavatar--large 明确属于 user-card 模块，不会和 product-listavatar 冲突。

• Block 名必须唯一且具业务含义，避免 container、wrap 这类泛化词
• Element 用双下划线 连接，Modifier 用双短横 --，不嵌套层级（如不用 user-cardheader__title）
• 可配合 CSS 预处理器生成命名空间前缀：@include ns('user-card') { ... }
• 工具链支持：PostCSS 插件 postcs

  

  s-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_buttonF1a2b），彻底解决命名冲突，但需配套构建工具（Webpack/Vite），且动态 className 拼接要小心（styles[`${prefix}icon`]）。

• 纯静态项目或需兼容 IE11？老老实实用 BEM + 属性锚点更稳妥
• 新项目若支持现代浏览器，:is(.user-card, .product-card) .title 可减少重复书写，但注意 :is() 不影响 specificity 计算，别指望它提升优先级
• Shadow DOM 是终极隔离，但成本高，适合 Web Component 场景，普通页面大范围使用反而增加调试难度

真正难的不是选哪种方案，而是团队能否统一命名习惯、守住 scope 边界。一个没加命名空间的 .loading 类，可能让三周后的某个深夜排查变成一场灾难。