BEM类名本身对SEO无直接作用，因搜索引擎不索引CSS类名；其间接价值在于通过模块化约束推动语义化HTML结构、合理使用语义标签与ARIA属性。
单纯用 BEM 命名类名（比如 header__logo--dark）本身对 SEO 没有直接作用——Google 明确表示不索引 CSS 类名，爬虫也不解析它们的语义。
为什么搜索引擎完全忽略 BEM 类名
爬虫只关心 HTML 元素类型、role、aria- 属性、alt、文本内容和 DOM 层级关系。它不会把 btn--primary 当成“按钮”，也不会因 article__title 就认定这是标题。BEM 类名在 HTML 源码里只是字符串，不参与语义建模。
常见错误现象：
- 写
<div class="article__title">标题</div>而不是<h2 class="article__title">标题</h2> - 整个页面用一个
<div class="page"> 包到底，没用 <code><main></main>、<nav></nav>等语义标签 - 图标用伪元素 +
icon--search类，但没配aria-label或alt - 每个 BEM 块（Block）优先对应一个语义标签：用
<section class="product-list"></section>代替<div class="product-list"> <li>元素（Element）复用原生语义标签：把 <code>menu__item写在<li>上，而不是<div> <li>修饰符（Modifier）同步状态属性：<code>tab--active出现时，加上aria-selected="true" - 避免
page__content__article__header__title这类嵌套类名——它暴露的是 HTML 已经过度包裹，应先扁平化 DOM
BEM 如何间接推动 SEO 友好结构
真正起作用的，是 BEM 的模块化约束倒逼你重审 HTML 结构。它让你更自然地为每个“块”分配语义容器，而不是堆 div。
立即学习“前端免费学习笔记（深入）”；
实操建议：
容易被忽略的关键点：BEM 是手段，不是终点
很多团队加了 BEM 就以为 SEO 升级了，结果源码里还是满屏 div 套 div。最常漏掉的其实是两件事：一是没把 BEM 块和语义标签绑定，二是没配合 ARIA 属性补全机器可读的状态。BEM 类名再规范，如果它挂在非语义元素上，就等于把路标钉在了墙上——看着整齐，但没人能顺着走。
