block是能独立存在、跨项目复用的功能单元，如.button；element必须依附block才有意义，如.card__title，命名须为block__element且不可嵌套。
Block 和 Element 的区别不在写法上，而在语义和复用能力上：一个能独立存在、跨项目复用的是 Block；必须依附于某个 Block 才有意义的，才是 Element。
判断一个类名该是 Block 还是 Element，看它能不能脱离上下文单独用
这是最直接的判断依据。比如 .button 是 Block——你可以在登录页、弹窗、侧边栏里各放一个，不依赖任何父容器；而 .card__title 就只能出现在 .card 内部，抽出来单独用就失去语义，它就是 Element。
- Block 类名通常对应一个完整功能组件（
.modal、.tabs、.input） - Element 类名永远带双下划线，且前缀必须是它所属的 Block 名（
.modal__header合法，.header__modal不合法） - 如果某个“元素”在多个不同 Block 里重复出现（比如图标
.icon），它大概率本身就是一个 Block，不该写成.button__icon或.card__icon
常见误判场景：把视觉上“小”的东西默认当 Element
很多团队看到 .button__text 就觉得“文字肯定属于按钮”，但实际中 .button__text 往往只是按钮内一段文案，样式完全由 .button 控制，自己没有独立样式逻辑——这种情况下，它不该有独立类名，更不该作为 Element 出现在 BEM 中。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Element 必须承担可复用的样式职责，比如
.button__loader可能在不同按钮类型中复用加载状态 - 纯内容容器（如
.card__content）可以是 Element，但前提是它有明确、稳定的样式边界（padding/margin/overflow 等） - 如果一个“元素”只用来加 margin 或包裹文字，没样式、没变体、不参与修饰符，那它大概率不该存在——删掉这个类，直接用标签选择器或继承处理更轻量
命名冲突时优先保 Block 的独立性
当设计稿里出现两个长得像但语义不同的组件（比如“搜索框”和“筛选条件输入框”），别为了省事都叫 .form__input。它们很可能该是两个 Block：.search-input 和 .filter-input，各自管理自己的 Element（如 .search-input__icon、.filter-input__clear）。
- Block 名称应反映业务或功能含义，不是 DOM 结构（
.form__input描述结构，.search-input描述用途） - Element 名称不能包含 Block 意图（
.search-input__search-icon错，.search-input__icon对） - 一旦 Block 名含修饰语（如
.primary-button），说明它本该是.button--primary——Block 本身不该带状态
真正难的不是写对双下划线，而是每次加一个新类名前，问一句：“它有没有资格独立存在？” 这个问题答错一次，后面就会多出一堆无法解耦、不敢动、改一处崩三处的样式依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
