直接写 .btn-primary 会引发样式泄漏，因其缺乏 block 归属，语义模糊易冲突；安全做法是绑定具体 block，如 buttontext--primary，并严格遵循 bem 规范：仅用 .blockelement 和 .block--modifier，禁止单独使用 __ 或 -- 部分，避免深度嵌套与动态构造类名。
为什么直接写 .btn-primary 会引发样式泄漏
因为 .btn-primary 没有声明归属关系，它既不是某个 block 的 element，也不带明确的 modifier 上下文。它看起来像通用类，实际语义模糊：是所有按钮的“主要样式”？还是某个特定组件（比如 sidebar-btn）的变体？一旦两个不同模块都用了这个类名，样式就可能互相覆盖。
真正安全的是绑定到具体 block：button__text--primary 表明这是 button 块下的文本元素、处于 primary 状态；card__button--primary 则属于 card 块——哪怕都叫 “primary”，也不会冲突。
-
__必须存在，且只用于直接属于某个 block 的元素，禁止孤立使用__text或text - 修饰符不能脱离主体存在：
button--large合法，large单独用就是错的 - 避免用
primary这类泛义词作 modifier，优先用描述性状态：button--submit、button--loading
SCSS 中嵌套超过一层就破坏 BEM 隔离性
BEM 允许的 CSS 选择器只有 .block__element 和 .block--modifier 两种形式。SCSS 里写 &__item &__icon（中间带空格）会生成后代选择器，等于把样式逻辑耦合进 DOM 结构，违背 BEM 的封装原则。
常见错误：.table { &__cell { &__badge { ... } } } → 生成 .table__cell .table__cell__badge，破坏隔离性。
- SCSS 只允许单层嵌套：
.block { &__element {} &--modifier {} } - 遇到“子元素的子元素”，优先拆成新 block：
.table-cell__badge→ 改为.badge+.badge--in-table - 真需上下文关联时，用属性选择器替代深度嵌套，比如
[data-badge-type="status"]
React 中手动拼接 className 容易漏状态、难维护
写 className={`button ${isDisabled ? 'button--disabled' : ''} ${isActive ? 'button--active' : ''}`} 看似简单，但每加一个状态就得补一串三元，极易漏掉 class、拼错命名，DevTools 里也看不到完整语义。
更危险的是动态构造：`${block}__${elem}--${mod}` —— 若 elem 值含空格或特殊字符，类名直接失效。
- 用
clsx声明式组合：className={clsx('button', { 'button--disabled': isDisabled, 'button--active': isActive })} - 所有 BEM 全称必须硬编码，不从 props 动态构造
__或--部分 - 禁止在组件内定义中间变量如
const btnClass = 'button'，否则 DevTools 里看不到完整语义
把 DOM 结构直接映射为 BEM 层级导致过度嵌套
看到 HTML 是 <div class="card"><div class="card__body"><p class="card__text"></p></div></div>，就以为 card__text 合理——但如果某天要在 modal__body 里复用同样样式的文本，就暴露问题：它本质不是 card 的专属元素，而是可独立复用的文本块。
典型反模式：navigation__item__icon--filled、user-profile-card__header-section-title-text —— 名字越长，说明 block 粒度越错。
- Block 必须是功能闭环单元：
search-form合格，section-2不合格 - Element 名称不带父级语义：
card__title正确，card__card-title冗余 - 超过两级 element（如
modal__content__title）就该拆：要么提升为独立 blocktitle-block，要么用单下划线例外约定modal__content-title（需全队共识）
全局搜索替换旧类名导致 HTML/JS 失效
老项目里 .btn 可能同时承担按钮、链接、标签三种语义，还混着 .btn-red、.active-btn、.header-btn 这类非结构化命名。强行统一成 button__text 会导致：
- HTML 中大量 class 失效，页面瞬间错乱（尤其未加
!important的旧样式） - JS 里通过
document.querySelector('.btn')绑定的逻辑全部断裂 - 设计师标注的「红色按钮」对应
button--primary还是button--danger，没人敢确认
真正可行的起点是：只对新增组件、高频修改区域、或已明确复用失败的模块启用 BEM，比如弹窗、表单校验提示、数据表格操作栏。旧代码用 wrapper class 包裹收敛，如把遗留的 .nav 包进 <nav class="header-nav"></nav>，后续扩展用 header-nav__item。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
