block 是 bem 中唯一能独立存在的命名单元，需满足可复用、无依赖、有明确边界；名称须纯单词连字符分隔，不绑定 html 标签，抽象粒度应为用户可感知的功能单元。
Block 是 BEM 中唯一能独立存在的命名单元，不是 HTML 里的 display: block 元素，也不是语义化标签本身。
Block 必须满足可复用、无依赖、有明确边界这三条标准
很多人把 <header></header> 或 <nav></nav> 直接当 Block 用，结果发现样式一改就崩——因为 HTML 标签只是容器，不是 Block。真正的 Block 是你定义的、带业务语义的组件单元。
- 可复用：同一个
.search-form能出现在首页、搜索页、弹窗里，不依赖父级结构 - 无依赖：不靠
.page__main .search-form这种嵌套选择器生效；CSS 中只写.search-form {} - 有明确边界：它封装了视觉、行为、状态，比如
.card包含标题、内容、操作按钮，但不包含“卡片列表”这种组合逻辑（那是另一个 Block）
Block 名称不能带下划线或短横线前缀/后缀
常见错误是写成 .block-name 或 ._block，这会破坏 BEM 的解析一致性。BEM 规范要求 Block 名称是纯单词组合，用连字符 - 分隔词义，且首尾不能有符号。
- ✅ 正确：
.user-card、.promo-banner、.price-tag - ❌ 错误：
.user_card（用了下划线，和__冲突）、.user--card（--是 Modifier 专用）、.-user-card（开头符号干扰解析） - ⚠️ 注意：
.btn比.button更常用，但前提是团队共识——缩写必须无歧义，且全项目统一
Block 不等于 DOM 节点层级，也不绑定具体 HTML 标签
一个 Block 可以对应 <div>、<code><section></section>、甚至 <button></button>，关键看它是否承载完整功能语义。比如 .icon Block 可以是 <svg></svg> 或 <i></i>，只要类名一致、样式隔离、逻辑内聚就行。
- HTML 中允许换标签：
<button class="primary-btn"></button>和<a class="primary-btn"></a>都合法 - 但禁止跨 Block 混用：
<div class="card__title"> 不能脱离 <code>.card独立存在，否则就是设计缺陷 - 性能影响：Block 级样式不依赖父选择器，浏览器渲染时无需向上遍历 DOM 树，对长列表页有实际提速效果
最容易被忽略的是 Block 的「抽象粒度」——它不该是「页面某一块区域」，而应是「用户能感知的一个功能单元」。比如「登录表单」是 Block，「表单里的邮箱输入框」是 Element，但「表单头部的 Logo」如果在多个表单中复用，它就应该抽成独立的 .form-logo Block，而不是塞进 .login-form__logo 里。这种判断没有银弹，得看它是否真的被多处引用、是否具备独立配置能力。
