BEM要求header__logo不能直接塞进，因为BEM的Block（如site-header）必须是可复用、职责明确的独立模块，而原生是文档级语义容器，逻辑可能跨页面不一致；应保留标签保障SEO与无障碍，BEM类名加在其内部子元素上，如...。

为什么不能把 header__logo 直接塞进

就完事？

很多人以为用了

标签，再套个 header__logo 类名就“语义+架构”双达标了——其实错在混淆了 HTML 结构语义和 CSS 模块边界。BEM 的 header Block 必须是**可复用、有明确职责的独立模块**，而原生

是文档级语义容器，可能跨页面复用逻辑完全不同（比如首页 header 带搜索框，内页 header 只有返回按钮）。强行让 BEM Block 名和标签名同名，会导致样式污染或复用失效。

实操建议：

• Block 名应描述功能而非标签，例如用 site-header 代替 header，既保留语义指向，又划清模块边界
• 标签仍要保留，它负责无障碍和 SEO；BEM 类名加在内部子元素上，如
  ...
• 避免 header__nav 这类写法——
  本身已是语义化元素，应单独建 main-nav Block，而非作为 site-header 的 Element

main 标签里还能不能用 main__article？

能，但必须满足一个前提：这个 main__article 真的是当前 main 模块专属的子结构，且不会被抽离复用。一旦你发现某块内容（比如文章卡片）在列表页、详情页、弹窗里都出现，它就该升级为独立 Block，比如 article-card，而不是依附于 main。

常见错误现象：

• 在
  里写
  ，结果首页用、活动页也抄过去，但活动页 hero 需要加倒计时组件——改样式就得动 main__hero，牵连首页
• 用 main__sidebar，但 sidebar 其实是全局侧边导航，和 main 内容无强耦合，此时应建 global-sidebar Block

判断标准很简单：删掉父 Block 后，这个 Element 是否还能独立存在并表达完整意图？不能，就不是合格的 Element。

当

承载广告位时，BEM 类名该怎么起？

直接叫 aside__ad-banner 是典型错误——

是语义容器，不定义内容类型；广告位是业务模块，应自成 Block。否则下次在 footer 或 modal 里加同样广告，你就得复制粘贴一堆非语义类名，或者硬写 footer__ad-banner 破坏一致性。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

正确做法：

• 广告位统一用 ad-banner Block，不管它放在
  、
  还是
  里
• 如果广告有状态差异（如加载中/错误态），用 Modifier：ad-banner--loading、ad-banner--error
• 需要控制布局位置时，靠外层语义标签或工具类（如 UnoCSS 的 flex-col）处理，不侵入 Block 内部

性能影响：独立 Block 意味着样式隔离，避免意外级联；同时支持按需加载 CSS chunk（尤其在 Vue/UniApp 中配合 defineAsyncComponent）。

用 BEM 时，哪些 HTML5 语义标签必须保留？

、
、
、
、
这五个必须保留，哪怕它们只包一层 div。它们不是“可选装饰”，而是浏览器解析 DOM、屏幕阅读器构建导航树、搜索引擎判定内容权重的基础依据。

容易踩的坑：

• 为了“省一个标签”把
  换成
  —— 辅助技术将无法识别这是导航区
• 在
  外面再套
  ，却不给

  加 class——SEO 会降权主内容识别率
• 用
  替代
  写博客正文——
  明确表示可独立分发的内容单元，对 RSS 和聚合场景至关重要

真正需要 BEM 约束的是**组件内部结构**，不是语义容器本身。语义标签管“这是什么”，BEM 类名管“这模块怎么组织”。两者各司其职，强行合并反而削弱语义强度。