HTML5项目如何应用BEM规范

实操建议：

• Block 名应描述功能而非标签，例如用 site-header 代替 header，既保留语义指向，又划清模块边界
• 标签仍要保留，它负责无障碍和 SEO；BEM 类名加在内部子元素上，如

  ...
• 避免 header__nav 这类写法——

main 标签里还能不能用 main__article？

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

常见错误现象：

• 在
  里写

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

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

当

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