CSS自定义属性不被搜索引擎直接索引，但加载路径、作用域和JS时序不当会拖慢首屏、隐藏内容、破坏语义，导致Googlebot扣分；必须将首屏必需变量内联至head、声明在:root、避免用var控制display/content。
CSS自定义属性本身不被搜索引擎当作内容索引，也不会直接参与排名计算；但用错位置、用错时机、或配合错误加载方式时，会实实在在拖慢首屏、隐藏正文、破坏结构语义——这些间接影响会被Googlebot记录并扣分。
var()在首屏渲染链里失效，爬虫看到的是白屏或错位
Googlebot能解析var(--color)，但前提是它能及时拿到计算结果。如果变量定义在体积过大（>15KB）的外部main.css中，且没内联，浏览器就得等整个文件下载+解析完才构建CSSOM，首屏文本延迟渲染——爬虫可能只截到空白或布局错乱的快照。
- 把首屏必需的变量（如
--h1-font-size、--container-width）提取出来，用<style>内联进<head>，控制在2KB以内 - 避免把所有变量塞进一个未压缩的
theme.css再@import进来——这会让加载变成串行瀑布流，比多个<link>慢30%以上 - 别用JS动态设置
document.documentElement.style.setProperty('--theme', 'dark')来初始化主题，DOMContentLoaded之后才执行，等于告诉爬虫“先别看”
:root声明缺失或被覆盖，导致关键样式静默回退
变量写在.theme-dark类里看似能切主题，但::before里的content: var(--seo-title)根本不会生效——伪元素无法访问非:root作用域的变量；更糟的是，SSR生成的HTML若没同步data-theme属性，客户端JS一执行就覆盖掉服务端注入的值，爬虫看到的是未应用样式的原始DOM。
- 全局变量必须声明在
:root，这是唯一被浏览器保障覆盖全树的位置；写在html或body里，部分框架（如Next.js SSR）会因层叠顺序问题导致静默失效 - 主题切换统一用
:root[data-theme="dark"] { --bg: #121212; }，由JS调用document.documentElement.setAttribute('data-theme', 'dark')触发，别改className - 检查Chrome DevTools的Coverage面板，确认首屏用到的所有
var(--x)所依赖的样式块都已加载——多数SEO审计工具（包括旧版Lighthouse）压根不识别这种依赖关系
用var()控制display或content，等于主动隐藏内容
搜索引擎不解析变量名，也不读取content伪元素里的字符串。靠var(--hide-main, block)初始设为none来“占位”，等JS加载后再切回来，结果就是爬虫看到的关键正文永远是display: none；同理，在::before里拼关键词如content: attr(data-seo-keyword)，伪元素内容不进真实DOM，爬虫完全看不到。
立即学习“前端免费学习笔记（深入）”；
- 核心内容是否显示，必须由HTML结构和class控制，比如
<main class="is-loaded">，而不是靠var(--show-main, none) - 变量值别存文本内容，如
--page-title: "Best Tools"——CSS不输出可索引文本，纯属浪费字节 - 命名带关键词（如
--seo-h1-color）毫无意义，爬虫不解析变量名，起得再“精准”也没用
最容易被忽略的点是：变量本身很安全，但它的加载路径、作用域边界、与JS的协作时序，全是隐性陷阱。上线前务必用Chrome DevTools手动验证首屏样式是否完整、是否依赖未加载的外部CSS、是否在无JS环境下仍能回退到合理默认值。
