Block 是 BEM 中唯一能独立存在的命名单元，需满足可复用、无依赖、有明确边界；名称须纯单词连字符分隔，不绑定 HTML 标签，抽象粒度应为用户可感知的功能单元。

Block 是 BEM 中唯一能独立存在的命名单元，不是 HTML 里的 display: block 元素，也不是语义化标签本身。

Block 必须满足可复用、无依赖、有明确边界这三条标准

很多人把 <header> 或 <nav> 直接当 Block 用，结果发现样式一改就崩——因为 HTML 标签只是容器，不是 Block。真正的 Block 是你定义的、带业务语义的组件单元。

• 可复用：同一个 .search-form 能出现在首页、搜索页、弹窗里，不依赖父级结构
• 无依赖：不靠 .page__main .search-form 这种嵌套选择器生效；CSS 中只写 .search-form {}
• 有明确边界：它封装了视觉、行为、状态，比如 .card 包含标题、内容、操作按钮，但不包含“卡片列表”这种组合逻辑（那是另一个 Block）

Block 名称不能带下划线或短横线前缀/后缀

常见错误是写成 .block-name 或 ._block，这会破坏 BEM 的解析一致性。BEM 规范要求 Block 名称是纯单词组合，用连字符 - 分隔词义，且首尾不能有符号。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• ✅ 正确：.user-card、.promo-banner、.price-tag
• ❌ 错误：.user_card（用了下划线，和 __ 冲突）、.user--card（-- 是 Modifier 专用）、.-user-card（开头符号干扰解析）
• ⚠️ 注意：.btn 比 .button 更常用，但前提是团队共识——缩写必须无歧义，且全项目统一

Block 不等于 DOM 节点层级，也不绑定具体 HTML 标签

一个 Block 可以对应 <div>、<section>、甚至 <button>，关键看它是否承载完整功能语义。比如 .icon Block 可以是 <svg> 或 <i>，只要类名一致、样式隔离、逻辑内聚就行。

立即学习“前端免费学习笔记（深入）”；

• HTML 中允许换标签：<button class="primary-btn"> 和 <a class="primary-btn"> 都合法
• 但禁止跨 Block 混用：<div class="card__title"> 不能脱离 .card 独立存在，否则就是设计缺陷
• 性能影响：Block 级样式不依赖父选择器，浏览器渲染时无需向上遍历 DOM 树，对长列表页有实际提速效果

最容易被忽略的是 Block 的「抽象粒度」——它不该是「页面某一块区域」，而应是「用户能感知的一个功能单元」。比如「登录表单」是 Block，「表单里的邮箱输入框」是 Element，但「表单头部的 Logo」如果在多个表单中复用，它就应该抽成独立的 .form-logo Block，而不是塞进 .login-form__logo 里。这种判断没有银弹，得看它是否真的被多处引用、是否具备独立配置能力。