BEM通过.block__element--modifier结构实现样式隔离，因类名自带归属锚点、不依赖HTML层级、避免后代选择器，杜绝跨块干扰与全局污染。
直接用 .btn、.header 这类泛化类名，根本防不住样式污染——浏览器不认“模块”，只认选择器是否匹配，后加载的规则无条件覆盖前一个。
为什么 BEM 的 block__element--modifier 结构能真正隔离作用域
BEM 不是给类名加前缀，而是用命名本身声明归属和上下文。一个 search-form__input 离开 search-form 块就失去语义基础，它不会被 .modal__input 或全局 .input 干扰，也不依赖 HTML 层级（比如不用 .search-form input）。
- 错误写法：
.search-form input—— 一旦页面其他地方也有input，就可能误中 - 正确写法：
.search-form__input—— 类名自带归属锚点，匹配即生效，不靠父容器类存在 - 修饰符必须配合块或元素使用：
.button--primary合法，单独写.button--primary而不带.button是错的（缺失基础结构） - 禁止嵌套过深：
.page__section__title违反 BEM 原则；应拆为.page__section和.section__title两个独立块
第三方组件或动态插入 DOM 时，BEM 怎么不被绕过
BEM 不拦截外部代码，但你可以控制它的影响边界。关键不是“不让它进来”，而是“不让它乱跑”。
- 对 Ant Design、Element Plus 等库，避免直接写
.ant-btn，改用上下文限定：[data-scope="user-profile"] .ant-input - JS 动态添加类时，必须走 BEM 命名：
el.classList.add('tooltip--visible')，禁用'active'、'show'这类裸名 - 服务端渲染的静态 HTML 若 class 不可控，在外层容器加 BEM 块名，并用属性选择器兜底：
.article-content [class^="hljs-"] - 不要用模糊匹配：
[class*="cm-"]易误伤，优先用精确的[data-scope]或前缀匹配[class^="ant-"]
工具链怎么把 BEM 规范从“建议”变成“强制”
靠人自觉撑不过两个迭代。必须让校验进开发流程，否则很快退化成“看着像 BEM”的假规范。
- 用
stylelint-selector-bem-pattern插件，在保存/提交时校验类名格式，不合规直接报错 - 组件模板里禁用自由
class绑定，只允许通过bem('button', { loading: true })这类函数生成类名 - VS Code 安装 BEM Helper 插件，自动补全
block__elem和block--mod格式 - CI 流程中加入 ESLint 检查，拦截
.header .logo这类后代选择器写法
最容易被忽略的一点：BEM 的隔离效果不取决于你写了多少 __ 和 --，而取决于所有相关样式是否**只通过这个唯一类名注入**。只要某处还写着 .search-form .input，沙箱就已经漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
