css类名本身不被搜索引擎解析为语义信号，真正影响seo的是html结构与语义标签的配合；bem仅在推动正确使用语义化标签时才间接起作用。
CSS 类名本身不会被搜索引擎解析为语义信号，爬虫不读类名、不执行 CSS、也不靠 card__title 判断内容重要性——所以“用 BEM 就能提升 SEO”是常见误解。真正影响爬虫理解的是 HTML 结构与语义标签的配合程度，BEM 只有在推动你写对 HTML 的前提下才间接起作用。
为什么搜索引擎完全忽略 btn--primary 这类类名
Google Search Central 明确说明：CSS 类名不属于索引依据。爬虫提取信息靠的是元素类型（h1、nav、article）、属性（aria-label、role）、文本位置和 DOM 层级，而不是类名字符串。哪怕你把类名写成 seo-friendly-heading，只要它套在 div 上，就等同于没写语义。
- 类名不会触发可访问性树构建，也不会改变渲染后的内容权重
- 工具如 Lighthouse 的“SEO 检查”项里，从不扫描 CSS 文件或 class 属性值
- 实测：两个页面仅差类名（
header-logovsbrand-mark），搜索结果排名无差异
哪些类名改动确实会影响爬虫对 DOM 的理解
不是类名本身，而是类名如何倒逼你调整 HTML 结构。当 BEM 要求你确认 “这个标题属于哪个 Block”，你就不得不回答：“它是 article 的一部分，还是 sidebar 的副标题？”——这个思考过程会暴露 HTML 的语义缺失。
- 把
div class="article__header"改成header class="article__header"，让爬虫识别出这是文章头部区域 - 把
div class="nav-menu__item"套在a上，而不是span，保留原生导航语义和键盘可访问性 - 把
div class="main-content"替换为main class="page__main"，显式声明主体内容区 - 避免
div class="button--cta"包裹文字，改用button class="button button--cta"，确保可点击语义不丢失
React/Vue 项目中容易忽略的语义断层点
组件化开发常把结构和样式隔离太彻底，导致类名很 BEM，但外层容器仍是 div。比如一个 UserCard 组件，JSX 里写了 className="user-card__avatar"，但整个卡片包裹在 div className="user-card" 里——这等于放弃 article 或 section 的语义锚点。
- 每个 BEM Block 应尽量对应一个语义化容器：
section、article、aside、nav - 不要为了统一前缀强行降级标签：把
nav写成div class="header__nav"，反而掩盖了导航意图 - 修饰符可同步 ARIA 状态：
tab--active出现时，自动加aria-selected="true"，比纯视觉切换更利于爬虫和读屏器理解 - 禁止
page__content__article__header__title这种嵌套类名——它反映的是 HTML 结构臃肿，而扁平、语义明确的 DOM 才易被高效抓取
最常被跳过的一步是：写完 BEM 类名后，没回头检查它挂载的 HTML 标签是否承载了对应语义。类名再规范，若脱离语义标签，就只是给开发者看的注释，对爬虫毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
