判断一个类该叫block还是element，关键看它能否独立存在、是否具备复用价值：能跨上下文复用、有独立样式/行为/语义的为block（如.search-form），否则必须依附block的为element（如.search-form__input），且element不可嵌套、不得跨block复用。
怎么判断一个类该叫 block 还是 element
关键看它能否独立存在、是否具备复用价值。比如 .search-form 是 block，因为它能被用在首页、商品页、弹窗里；而 .search-form__input 就不能单独用——离开 search-form，它就失去语义和样式上下文。
常见错误是把视觉分组当 block：.section-2、.wrapper、.container 都不合格，它们没功能含义，只是临时布局占位符。真正合格的 block 名必须是名词 + 动词/角色组合，如 .user-card、.notification-banner、.pagination-controls。
- Element 名称不带父级语义：
.card__title正确，.card__card-title冗余 - Element 不能跨 block 复用：
.button__icon和.card__icon应该是两个独立元素，不要试图共用icon类 - 如果某个“子元素”在多个 block 里高频复用（比如 badge、avatar），它本身就应该升为 block：
.badge、.avatar
modifier 该写成 --loading 还是 --primary
写 --primary，别写 --loading。前者表达意图（主操作按钮），后者暴露实现细节（正在加载），容易和 JS 状态强耦合。
设计师换主题时，button--red 得全局搜替换；但 button--primary 只需改一遍变量或主题配置就能生效。Modifier 的值必须可预测、可枚举、与业务逻辑对齐。
- 禁止用视觉描述：
--blue、--small、--left - 禁止用临时标签：
--v2、--new、--temp - 允许修饰 element：
.search-form__submit--disabled，但前提是这个 disabled 状态只影响 submit 元素自身，不牵连整个 form
SCSS 里怎么写才不破坏 BEM 原则
只用单层嵌套：&__ 和 &-- 安全，&__item &__icon（中间有空格）危险——它会编译出后代选择器 .block__item .block__icon，破坏封装性。
真实项目中，Sass 编译后必须是扁平类名。哪怕结构再深，CSS 输出里也不能出现空格连接的选择器。
- 正确写法：
.card {<br> &__title { font-size: 1.2rem; }<br> &--featured { background-color: #f0f8ff; }<br>} - 错误写法：
.card {<br> &__content {<br> &__icon { /* 编译出 .card__content .card__content__icon */ }<br> }<br>} - 遇到“元素里的元素”，优先拆新 block：
.table-cell__status-badge→ 改为.status-badge+.status-badge--in-table
老项目怎么逐步迁移到 BEM 而不炸掉线上
全量重命名成本高、风险大，真正可行的是“新老共存 + 边界收敛”。重点不是改完所有旧代码，而是守住新增入口。
具体做法：给遗留组件加 wrapper class，比如把原始 <nav class="nav"></nav> 包进 <nav class="header-nav"></nav>，后续扩展全部用 header-nav__item；同时在 ESLint 或 Stylelint 中启用 stylelint-selector-bem-pattern 规则，只对新写的 .scss 文件校验。
- 禁止在 BEM block 内部写类型选择器：
.card h3必须改成.card__title - 第三方 UI 库（如 Ant Design）类名不强行改，但在外层包一层 block 容器隔离：
<div class="my-dashboard__ant-table-wrapper">...</div> - 允许保留原子工具类（如
u-text-center），但严禁在 block 内部结构中使用它们替代语义化类名
BEM 的核心约束其实就两条：block 边界必须清晰，element 不得跨 block。其余都是围绕这两条展开的取舍——命名长度、嵌套深度、工具链支持，都服务于“让样式作用域收敛到组件级”这个目标。一旦开始怀疑某个类名是不是 BEM，先问一句：它脱离当前 block 还能独立存在吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
