block是独立可复用的功能单元，须具业务语义且不依赖父容器；element必须依附block存在、禁嵌套、命名用双下划线连接；modifier描述状态或变体，须语义化、不可绑定具体值、禁止替代结构。
Block 怎么识别：看它能不能独立复用
Block 是一个语义完整、功能自洽的 UI 单元，不依赖父容器就能存在。比如 .card、.header、.search-form，它们各自有明确边界和用途，能被复制粘贴到任意页面位置直接生效。
常见误判是把视觉分组当 Block —— 比如把整个 .main-content 区域当成 Block，但它只是容器，没具体功能；真正该拆的是里面的 .article-list、.sidebar-nav 这类可复用组件。
- 判断标准：删掉它，页面其他部分是否还能正常工作？能 → 可能是 Block
- 命名必须全小写，单词间用短横线（
user-profile✅，userProfile❌） - 不要带层级暗示，
.page-header不如.header—— “page” 是上下文，不是 Block 本身属性
Element 为什么不能单独用 class
Element 必须依附于 Block 存在，它没有独立语义。比如 .card__title、.card__footer，一旦脱离 .card 就失去意义，样式也可能失效。
错误写法：<div class="card__title">标题</div> —— 这里缺失了 Block 容器，CSS 选择器 .card__title 通常依赖 .card 的作用域或嵌套逻辑（即使实际没嵌套，BEM 理念也要求语义绑定）。
- Element 名称描述“它是什么”，不是“它看起来怎样” ——
.card__close-btn✅，.card__red-btn❌（颜色应由 Modifier 控制） - 双下划线
__是硬性分隔符，不能写成.card_title或.card-element-title - 避免深层嵌套 Element：
.card__body__paragraph__link是反模式，应拆成.card__body+.paragraph（新 Block）
Modifier 什么时候该加 --，什么时候不该加
Modifier 表示状态或变体，必须和 Block 或 Element 绑定使用，永远不单独出现。它的核心作用是“开关式变更”，不是“新增样式”。
典型错误：给 .button 加 .button--primary 同时又写 .button--large，但没在 HTML 中同时应用两个类 —— 结果按钮尺寸没变，只改了颜色。BEM 要求状态类显式叠加。
- 块级 Modifier：
.button--disabled、.menu--fixed - 元素级 Modifier：
.card__title--highlighted、.form-input--error - 禁止用 Modifier 替代结构：不要用
.list--horizontal代替.list+.list__item布局，那是 display 层面的事，应交由工具类或 CSS Grid/Flex 控制 - 状态类要可预测：比如
--active应始终表示“当前激活”，不能在 Tab 组件里表示选中，在 Button 里表示 hover
BEM 类名组合容易漏掉的关键细节
真实项目里最常出问题的不是命名规则本身，而是组合时的隐含约束。比如 .card__content--collapsed 看似合规，但如果 .card__content 本身没定义基础样式（padding、font-size 等），这个 Modifier 就成了空中楼阁。
另一个高频坑：用 Sass 写嵌套时，习惯性写出 .card { &__title { ... } &--highlighted { ... } }，这没问题；但若写成 .card { &__title { &--large { ... } } }，就违背了 BEM 原则 —— 元素的 Modifier 应直接挂在元素上，而不是嵌套在元素内部。
- HTML 中必须同时存在 Block 和 Element 才能用 Element Modifier：
<div class="card"><div class="card__content card__content--collapsed">...</div></div> - Modifier 类名长度不是问题，但语义必须精确：
.input--has-error比.input--error更清晰，因为后者可能被误解为“输入框本身出错” - 多人协作时，建议用 ESLint 插件
stylelint-selector-bem-pattern检查类名，比人工 review 可靠得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
