CSS变量不会自动响应lang切换，因浏览器不重算var()值；需手动触发重绘、确保选择器匹配、声明完整变量、同步设置dir，并用逻辑属性替代物理属性。
CSS 变量本身不会自动响应 lang 属性切换，布局异常根本原因是变量未被重新计算或作用域错位——html[lang="ar-SA"] 这类选择器只在匹配时生效，切换后若未触发重绘或变量定义缺失，样式就“卡住”了。
为什么 html[lang="xx"] 切换后变量没更新？
浏览器不会因为 JS 修改了 document.documentElement.lang 就自动重算所有 CSS 变量值。关键点在于：
-
html[lang="ar-SA"]是静态选择器，只在 DOM 加载或属性变更时匹配一次；JS 动态改lang值后，需确保该选择器仍能命中当前节点（比如没拼错值、没加多余空格） - 变量必须在匹配的选择器块内完整声明，不能靠继承或 fallback：写
html { --font-main: "Noto Sans SC"; }后再用html[lang="ar-SA"] { --font-main: "Tajawal"; }是无效的——后者不会覆盖前者，只会被忽略 - 如果用了
:root预设变量，它不会被[lang]选择器覆盖，因为:root和html[lang]优先级相同，但后者更具体才生效；但若你漏写了html[lang="ar-SA"]中的某条变量（比如只写了--line-height没写--font-main），那这个变量就沿用旧值
如何安全地动态切换语言并更新变量？
手动触发重绘是最稳妥的方式，避免依赖浏览器隐式行为：
- 切换
lang后，立即执行document.documentElement.style.setProperty('--dummy', Date.now())，哪怕只是设个无用变量，也能强制 CSS 重计算全部var() - 不要只改
lang，同步设置dir：例如document.documentElement.lang = 'ar-SA'; document.documentElement.dir = 'rtl';，否则margin-inline-start等逻辑属性不会翻转 - 若用框架（React/Vue），确保
lang和dir是响应式绑定到根节点，而非仅渲染时写死；SSR 场景下，服务端输出的初始lang必须与客户端首次 hydrate 一致，否则会闪动或错乱
RTL 下布局仍错位？检查逻辑属性是否真正生效
变量更新了，但 margin-left 还在起作用，说明你没迁移到逻辑属性，或方向上下文缺失：
立即学习“前端免费学习笔记（深入）”；
- 确认元素 computed style 中
margin-inline-start的解析值：LTR 下应为margin-left，RTL 下应为margin-right；如果不是，说明dir没传下去，或祖先节点覆盖了direction - 别混用物理和逻辑边距：
margin-left: 1rem; margin-inline-start: 2rem;会导致冲突，旧浏览器读第一行，新浏览器读第二行，但若第二行因变量未定义而失效，就只剩margin-left在 RTL 下硬顶着 -
text-align: start必须和dir配套，不能只换字体不换对齐；start不是自动的，它只响应最近有dir的祖先
最易被忽略的是：变量名语义一致不等于行为一致——--text-spacing 在阿拉伯语里设 0.02em 是对的，但如果对应字体（如 Tajawal）本身字距更松，这个值反而会让文字挤在一起；实际值必须结合字体真实渲染效果微调，不能只按语言规范照搬。
