<p>直接写 .btn 或 .header 会立刻引发样式冲突，因其无 block 归属，等于将样式投入全局池子；多人协作时不同模块重复定义，生效取决于加载顺序或权重，而非业务意图；BEM 强制绑定到具体 block（如 login-formsubmit），并依赖 和 -- 的严格语法契约保障工具链有效性和结构可维护性。</p>
为什么直接写 .btn 或 .header 会立刻引发样式冲突
这类裸类名没有 block 归属，等于把样式扔进全局池子。多人协作时，.btn 可能在登录页定义 padding，在弹窗里又被重写 margin，最终谁生效取决于加载顺序或选择器权重，而不是业务意图。BEM 要求所有样式必须绑定到具体 block，比如 login-form__submit 或 modal__close-btn，让归属一目了然。
__ 和 _ 混用导致工具链失效
IDE 类名跳转、Sass 的 &__item 嵌套、stylelint 校验全部依赖 __ 作为唯一块-元素分隔符。user_card 或 btn_primary 看似只是少打一个下划线，实际会让所有工具无法识别结构。常见后果包括：搜索 logo 找不到 header__logo，重构时不敢批量替换，CI 阶段校验漏过。
修饰符 -- 单独使用或挂错位置
button--disabled 必须和基础 button 同时存在，否则删掉修饰符后样式直接崩塌；card__title--large 是典型错误——modifier 应该作用于 block（card--large），而不是 element，因为尺寸变化通常影响整个卡片布局，不是仅标题变大。其他常见错例：input--error 合法，input__label--error 很可能语义错位，应优先考虑 input--has-error。
SCSS 中嵌套生成后代选择器破坏 BEM 封装
BEM 要求最终 CSS 是扁平类名，不依赖 DOM 结构。.card { .title { ... } } 编译出 .card .title，一旦 HTML 加个 wrapper 或改标签，样式就断。正确写法只用 &__title 和 &--loading，且禁止 &__title { &__icon { ... } } 这类双层 __ 嵌套——它会生成非法的 .card__title .card__title__icon，违背 BEM 原则。
立即学习“前端免费学习笔记（深入）”；
真正卡住团队的不是规则本身，而是每次写class 前没确认：这个样式属于哪个独立功能单元？它会不会在别的上下文里意外生效？ 
