bem通过唯一block名和__/--结构强制命名隔离，.btn易冲突因泛用且无上下文，而button__text绑定到特定block，天然避免跨组件污染。
直接用 BEM 就能解决大部分类名冲突问题，但前提是 Block 名唯一、不跨模块复用、不和第三方库硬碰硬。
为什么 .btn 会冲突，而 button__text 不会
BEM 的隔离不是靠技术机制，而是靠命名结构强制收敛作用域。浏览器不管你是 .btn 还是 .ant-btn，只要类名相同就匹配；但 search-form__submit 和 modal__close 天然不同名，也不依赖父级选择器（比如不再写 .search-form .submit），DOM 结构一动，样式也不会悄无声息失效。
-
.btn:hover在多个组件里重复定义 → A 模块改色，B 模块也变，因为没作用域 -
search-form__submit只属于search-form这个 Block，哪怕页面里有十个搜索框，每个都独立可控 - 错误写法：
.card .title—— 一旦在卡片外加了个.title，样式就漏出去了；正确是.card__title
Block 名怎么取才不撞车
Block 是隔离的起点，名字错了，后面全白搭。它必须语义明确、可复用、不带上下文位置信息。
- ✅ 推荐：
user-card、product-list、search-form—— 独立、有业务含义 - ❌ 避免：
left-nav（含位置）、box（太泛）、myapp-button（硬加项目前缀反而破坏 BEM 原则） - 多团队共用同一 CSS 构建产物时，靠构建工具隔离更可靠：Webpack 的
css-loader?modules或 PostCSS 的postcss-prefix-selector，比手写前缀安全得多
第三方组件（如 Ant Design）怎么套 BEM
别改它的类名，也别试图给 .ant-btn 加 --primary。BEM 对第三方无效，强行套只会让选择器链断裂、动态类名失配、升级后全崩。
- 正确做法：用 wrapper Block 包一层，比如
form-field--date，再用属性或:deep()局部控制：.form-field--date:deep(.el-input__inner) - CSS Modules 下，必须显式声明穿透：
:global(.ant-btn) { margin-right: 8px; }，否则styles['ant-btn']是undefined - 最常被忽略的是注入顺序：Ant Design 的 CSS 若在入口
import，它可能比你的form-field--date规则优先级高，得靠 specificity 或调整link顺序来压住
JS 里拼 className 容易出什么错
手拼字符串看着简单，实际极易漏空格、错连字符、大小写混用，而且构建环境（Linux/Windows）对大小写敏感度不同，本地跑得通，CI 上直接挂。
- ❌ 危险写法：
className={`button button--${variant} ${hasIcon ? 'button__icon' : ''}`}—— 缺空格、无防错、难维护 - ✅ 推荐：
clsx('button', `button--${variant}`, { 'button__icon': hasIcon }) - Modifier 写错连字符（
button-large而非button--large）或大小写（Button__titlevsbutton__title）会导致样式完全不生效，DevTools 里也查不到匹配项
真正卡住落地的不是规则本身，而是 Block 边界是否清晰、Element 是否真的依附于它、以及团队是否一致拒绝在 BEM block 内写类型选择器（比如 .card h3）。这些地方一松动，BEM 就退化成带下划线的普通命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
