最轻量的多语言 css 方案是直接用 html[lang] 选择器匹配 html 的 lang 属性，需确保 正确设置，且选择器必须带 html 标签名（如 html[lang="zh-cn"]），避免遗漏或误用。
用 html[lang] 选择器直接写语言专属规则
不需要 JS、不引入新文件，最轻量的方案就是靠 HTML 自带的 lang 属性匹配。前提是你的 或 已正确设置——这是所有方案的前提，漏掉这步，后面全白搭。
常见错误现象：[lang="zh"] .btn 没生效，但检查发现实际是 lang="zh-Hans"；或者用了 body[lang]，而实际语言属性在 html 上。
- 必须写成
html[lang="zh-CN"]或html[lang^="zh"]，不能省略html标签名（否则可能被其他框架的同名属性干扰） -
lang^="zh"可覆盖zh-CN、zh-TW、zh-HK，但对zh-Hans不生效——BCP 47 规范下它和zh-CN是等价但字符串不同，得显式加html[lang="zh-Hans"] - RTL 布局（如阿拉伯语、希伯来语）建议单独处理：
html[lang="ar-SA"]+html[lang="he-IL"]，别用通配，避免误伤波斯语（fa-IR）等虽 RTL 但排版细节不同的语言
分离字体与排版样式到独立 CSS 文件
当字体栈差异大（比如中日韩英混排）、行高/字间距需微调、或 RTL 下 flex-direction 需翻转时，硬塞进一个 CSS 文件会让体积膨胀、维护困难，也容易因加载顺序导致 FOUC。
实操建议：把语言强相关样式抽成 fonts-zh.css、fonts-ar.css 等，通过 <link rel="stylesheet" data-lang="zh"> 标记，并用 JS 控制启用状态。
- 初始只启用当前语言对应的 link，其余加
disabled属性，避免浏览器预加载无用资源 - 切换语言时，用
document.querySelectorAll('link[data-lang]').forEach(...)批量开关，比替换<link href>更稳妥——后者在 Safari 下偶发缓存失效 - 务必在
中预加载关键字体文件，否则即使 CSS 加载了，字体仍会延迟渲染，造成文字跳变
用 CSS 自定义属性做细粒度语言适配
纯 html[lang] 选择器适合整体布局切换，但像「中文段落字间距宽松、英文紧凑」这类微调，用变量更灵活，也方便后续接入主题系统。
关键不是“能不能用”，而是变量是否绑定到语言上下文——:root 里设变量没用，必须按 lang 动态作用域。
- 正确写法：
html[lang="zh-CN"] { --text-spacing: 0.05em; --line-height: 1.7; }，然后组件里用letter-spacing: var(--text-spacing, 0); - 不要在 JS 里反复调用
document.documentElement.style.setProperty更新变量——那是在模拟主题切换，不是语言适配；语言变更通常是整页刷新或路由级切换，变量应随lang属性一次性注入 - 注意 SSR 场景：服务端渲染时就得把对应语言的变量内联进
<style></style>，否则首屏会用 fallback 值，直到 JS 运行才修正
BEM 块内避免语言逻辑泄漏
BEM 的核心是块（block）自治，.card__title 不该因为页面是日文就自动变字体——那是全局排版责任，不是卡片组件该管的事。强行在块内写 .card__title[lang="ja"] 会破坏复用性，也让样式难以测试。
真正要做的，是让 BEM 组件能“感知”语言环境，而不是“响应”它。
- 组件只声明结构，不声明语言表现：
.card__title保持语义纯净，字体、间距等由外层html[lang]或根级变量控制 - 如果某组件确需语言特有变体（如日期选择器的周起始日），用修饰符明确表达：
.date-picker--week-start-monday，而非.date-picker--ja——后者把语言耦合进组件名，违背 BEM 原则 - 构建时若用 PostCSS，可加校验规则：禁止出现
[lang]在块内部选择器中（如.button__label[lang="en"]），只允许出现在顶层html或body
lang 值一旦错，所有基于它的样式都会失效；而 BEM 组件的职责边界一旦模糊，多语言适配就会变成补丁堆叠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
