必须定义为独立 Block 的区域是目录（.toc-nav）和正文（.blog-post），二者语义独立、职责分离，不可共用 .article；.toc-nav 负责导航，.blog-post 专注内容，各自可跨页复用且互不影响。
文章详情页哪些区域必须定义为 Block
目录（TOC）和正文不能共用一个 .article Block —— 这是常见误用。真正的 Block 必须语义独立、跨页复用：.toc-nav 是导航组件，.blog-post 是内容容器，二者职责分离，各自可被插入侧边栏、弹窗或打印预览页而不改类名。
常见错误现象：
-
.article__toc和.article__content强行塞进同一 Block，结果在「相关文章」卡片里复用.article__content时，目录样式意外泄露 - 把
<nav>或<main>标签名直接当 Block 名，导致语义模糊、工具链无法识别（如 postcss-bem 报Unknown block "nav"）
实操建议：
- 目录用
.toc-nav，不是.article-toc或.toc；它内部的列表项是.toc-nav__item，不是.toc__link - 正文用
.blog-post（比.article更聚焦业务场景），其子元素严格限定范围：.blog-post__title、.blog-post__paragraph、.blog-post__quote - 若项目已存在
.article，需在构建配置中显式注册：blocks: ['article', 'blog-post', 'toc-nav']
.toc-nav__item 怎么处理锚点跳转与当前高亮
锚点逻辑属于交互层，BEM 不负责 JS 行为，但类名要预留状态表达能力。高亮状态必须通过 Modifier 显式声明，而不是靠 JS 动态加 .active 这类泛义名。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 默认项用
.toc-nav__item，当前激活项用.toc-nav__item--active，不要写.toc-nav__item-active（缺双短横，工具链识别为新 Element） - 如果需要区分“已滚动到”和“鼠标悬停”，就定义两个 Modifier：
--active和--hover，避免混用 - 禁止在
.toc-nav__item内部嵌套另一个 Block（如.icon），应直接使用.toc-nav__item-icon—— 图标是目录项的视觉组成部分，不是独立功能单元 - 响应式下隐藏某级目录项？用
.toc-nav__item--hidden@sm，但注意：这类带@sm的修饰符需构建工具支持解析，原生 CSS 不识别
.blog-post__paragraph 能不能包含链接或代码块
不能。BEM 要求 Element 必须职责单一：.blog-post__paragraph 只能包裹纯文本段落，否则会破坏结构契约，导致样式失控。
常见错误现象：
-
<p class="blog-post__paragraph">详见 <a href="#">文档</a></p>—— 链接样式被全局a规则污染，且无法单独控制段落内链接颜色 - 在
.blog-post__paragraph里塞<pre>，结果pre的 margin 和 font-size 覆盖了段落行高
实操建议：
- 段落内需链接？用
.blog-post__paragraph--rich修饰符，并在 CSS 中重置内联样式（如a { color: var(--link-color); }） - 代码块必须抽成独立 Block：
.code-block，再用.code-block--inline或.code-block--block区分形态 - 引用块不是段落的子元素：
.blog-post__quote是平行 Element，不写.blog-post__paragraph__quote（三层命名违反 BEM）
目录与正文之间如何保持视觉对齐又不耦合
不能靠 .toc-nav + .blog-post 这类兄弟选择器控制间距 —— 这绑定 DOM 顺序，一旦中间插入广告位或推荐模块，布局就断。
实操建议：
- 对齐逻辑交给父容器，比如外层
<div class="article-layout">，它负责用 Flex/Grid 排列.toc-nav和.blog-post，自身不承担语义 -
.toc-nav和.blog-post各自只管内部样式：前者控制列表缩进与字体大小，后者控制段落行高与引用边框 - 若需同步滚动定位（如滚动正文时高亮对应 TOC 项），JS 应监听
.blog-post内容区的scroll，而非依赖类名层级
最易被忽略的一点：TOC 和正文的字号、行高可能来自不同设计系统，但它们的垂直节奏必须一致。别指望靠 rem 自动对齐 —— 先统一 font-size 基准，再用 em 控制相对值，否则小屏下 TOC 文字挤在一起而正文还留白。
