直接写 .btn 会意外影响第三方组件，因为 css 天然是全局作用域，浏览器不区分来源，只要 dom 节点含该类名（如 ant design 渲染出 class="ant-btn btn"）就生效；bem 通过 block__element--modifier 强制划清归属边界，使 .card__title 必须依附 .card、.button--primary 必须与 .button 共存，脱离即失语义，从而切断污染链。
为什么直接写 .btn 会意外影响第三方组件
因为 CSS 天然是全局作用域，浏览器不区分“谁写的”.btn，只要 DOM 节点带这个 class，样式就生效。Ant Design 渲染出的按钮可能是 class="ant-btn btn"，你本地改的 .btn 会直接叠上去；服务端渲染的静态 HTML 里若有 btn，同样中招。
常见错误现象：Ant Design 按钮突然变蓝、Element Plus 输入框边框消失、自己写的 .modal 把 react-modal 的遮罩层撑开。靠提高选择器权重（比如 div.header button.btn）只是临时压制，且对动态挂载到 body 的弹窗完全失效。
block__element--modifier 怎么切断污染链
BEM 不是加前缀，而是用命名强制划清样式归属边界：.card__title 必须依附于 .card 容器存在，脱离即失语义；.button--primary 必须和 .button 同时出现，否则基础样式丢失。
-
__表示结构拆解：只用于块的直接子组成部分，如.dialog__header✅，.dialog__header__title❌（应为.dialog__title） -
--表示状态或变体：只修饰 block 或 element，不能单独使用，如.input--disabled✅，.input__label--disabled❌（语义混乱，难维护） - 禁止跨 block 组合：
.card__button可以，.card__modal-close不行——modal是独立 block，应写成.modal__close
为什么 BEM 在 JS 动态操作类名时仍有效
CSS Modules 编译后生成哈希类名（如 Card_title_abc123）确实隔离了运行时冲突，但它不解决「人写的类名是否可读、可协作」的问题。DevTools 里看到 Card_title_abc123，没人知道这是卡片标题还是页脚标题。
BEM 提供的是命名意图：.card__title 明确告诉所有人它的角色和归属。JS 动态添加类时，必须走 BEM 命名：el.classList.add('tooltip--visible') ✅，禁用 'active'、'show' 这类裸名。
容易踩的坑：
- 字符串拼接类名时漏掉一个 _ 就断链：className={`button__text button__text--${size}`} ✅，className="button__text " + sizeClass ❌
- 模板里自由绑定 class，没走 bem('button', { loading: true }) 这类封装函数，导致命名失控
BEM 的约束力其实只存在于人的认知里
没有工具能替你决定 .search__input 和 .search-input 哪个该算 block、哪个该算 element —— 这个判断必须每次手写时清醒做出，而不是交给 postcss 插件自动生成。
真正容易被忽略的点是：BEM 的隔离效果不取决于你写了多少 __ 和 --，而取决于所有相关样式是否**只通过这个唯一类名注入**。只要某处还写着 .search-form .input，沙箱就已经漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
