BEM本身对SEO零作用，因爬虫不索引CSS类名；其真正价值在于通过模块化命名倒逼开发者采用语义化HTML标签、合理DOM结构及配套ARIA属性，从而提升SEO效果。
没有直接影响，但会显著影响 SEO 的实际效果——关键在它倒逼你写的 HTML 是不是语义化的。
为什么 BEM 类名本身对 SEO 零作用
Google 明确表示不索引 CSS 类名；爬虫只关心 <h1>、role、aria-label、alt、文本内容和 DOM 层级关系。类名 article__title--featured 和 title-2 在爬虫眼里完全等价——都是无意义字符串。
常见错误现象：
- 写
<div class="article__title">标题</div>而不是<h2 class="article__title">标题</h2> - 整个页面用一个
<div class="page">包到底，没用<main>、<nav> - 图标用伪元素 +
icon--search类，但没配aria-label或alt
BEM 真正提升 SEO 的方式是约束 HTML 结构
它不靠类名“告诉”爬虫这是什么，而是通过模块化命名习惯，让你更自然地为每个功能块选对语义标签。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个 BEM 块（Block）优先对应一个语义标签：
<section class="product-list">代替<div class="product-list"> - 元素（Element）复用原生语义标签：
<li class="menu__item">写在<ul>里，而不是<div> - 修饰符（Modifier）同步状态属性：
tab--active出现时，加上aria-selected="true" - 禁用
page__content__article__header__title这类嵌套类名——它暴露的是 HTML 已过度包裹，应先扁平化 DOM
容易被忽略的关键点：BEM 是手段，不是终点
很多团队加了 BEM 就以为 SEO 升级了，结果源码里还是满屏 <div> 套 <div>。最常漏掉的其实是两件事：
- 没把 BEM 块和语义标签绑定（比如
button--primary写在<div>上，而不是<button>） - 没配合 ARIA 属性补全机器可读的状态（比如
input--error没同步aria-invalid="true"）
BEM 类名再规范，如果它挂在非语义元素上，就等于把路标钉在了墙上——看着整齐，但没人能顺着走。
