真正能叫Block的必须是具备独立功能、可复用、有完整样式与行为边界的内容单元；布局类如.header、.grid-container只是容器壳，不应作为Block，而.logo、.card、.user-avatar等才符合Block定义。
布局Block不能脱离容器结构单独存在
布局Block本质是“壳”，不是功能单元。它没有独立交互、不封装行为、也不跨项目复用，比如 .header、.main-layout、.grid-container——这些名字里带位置（header）、结构（grid）、范围（main）的，基本都属于布局层，不该作为 BEM 的 Block。
真正能叫 Block 的，必须满足：删掉它，页面就缺一个可交付的功能；它有自己完整的样式边界、JS 行为、测试用例；它能在弹窗、侧边栏、独立页面里直接复用。
-
.header不是 Block —— 它只定义顶部区域，没语义功能，也不单独使用；但.logo、.search-form是 Block，它们各自可被抽到用户页、404 页、邮件模板里 -
.card-grid不是 Block —— 它只是排列卡片的容器；而.card才是 Block，因为每张卡片都有标题、内容、操作按钮等完整逻辑 - 命名含
container、wrap、section、layout的类，大概率是布局占位符，应直接用标签选择器或 CSS Grid / Flex 布局控制，不赋予 BEM 类名
内容Block必须具备可复用的功能语义
内容Block 是业务语言，不是 DOM 语言。它回答的是“这是什么”，而不是“它在哪”或“它怎么排”。.user-avatar、.price-tag、.notification-badge 这类名字，一眼就能看出用途、状态、边界，且在多个上下文中出现过（评论区头像、订单列表头像、设置页头像），就是合格的内容 Block。
判断时盯住两点：它有没有自己的变体（.price-tag--sale）、状态（.notification-badge--unread）、交互（点击跳转、hover 展开）、样式边界（padding/margin/overflow 等）？如果没有，它大概率只是个样式钩子，不该升格为 Block。
立即学习“前端免费学习笔记（深入）”；
-
.form-group不是内容 Block —— 它只是包裹字段的容器，无独立语义；但.input-field、.date-picker是，因为它们各自封装输入逻辑和校验 -
.button是内容 Block，哪怕它只渲染一个<button>标签；而.btn-wrapper不是，它只是为 margin 或 flex 对齐服务的临时壳 - 如果某个组件在设计系统文档里被单独列出、有独立 Figma 组件、有 Storybook 示例，那它就该是一个 Block
嵌套中如何识别真正的内容Block而非布局残留
DOM 嵌套 ≠ BEM 嵌套。一个 <div class="card"><div class="card__content"><div class="user-avatar"></div></div></div> 里，.user-avatar 虽然物理上在 .card 内部，但它仍是独立 Block —— 因为它有自己的类、样式文件、事件监听，且在别处也存在。此时 .card__content 是 Element，.user-avatar 是 Block，两者共存合法。
容易踩坑的是把“视觉上在内部”当成“语义上属于内部”。只要子结构在别处出现过、有自己状态、能独立测试，就该剥离出来，而不是硬塞进父 Block 的命名空间。
- 错误写法：
.card__avatar—— 当头像也在评论区、消息气泡里复用时，这等于放弃复用能力 - 正确写法：
<div class="card"><div class="card__content"><div class="user-avatar"></div></div></div>，两个 Block 各自维护 - 混用（mix）是官方支持的：
<div class="card user-avatar user-avatar--small">合法，前提是.user-avatar确实需要在卡片内做尺寸微调，且不破坏其独立性
修饰符不能掩盖布局与内容的混淆
用 --compact、--nested 这类修饰符给布局类加变体，是危险信号。比如 .header--mobile、.grid-container--2col，看似合理，实则暴露了 Block 定义错误：真正该响应式变化的，是内容 Block 自身（.nav--collapsed、.card-grid--two-column），而不是那个空壳。
一旦发现修饰符在描述容器形态而非组件状态，就要回溯检查：这个类名是不是本该不存在？它的职责是否已被现代 CSS（如容器查询、display: grid）接管？
-
.card--fluid错误 —— 流体宽度是布局逻辑，应由父容器控制；.card本身只需定义内边距、圆角、阴影等固有样式 -
.card__title--truncate正确 —— 这是标题自身的状态，影响文本溢出行为，属于内容 Block 的 Element 变体 - 所有修饰符必须绑定到明确的 Block 或 Element 上，不能挂在
.wrapper、.container这类无语义类上
