CSS国际化与主题切换需分离语言/区域样式（如文字方向、逻辑属性）和视觉主题（如颜色变量），通过构建工具在编译时静态注入对应资源，而非运行时CSS变量切换。
CSS 项目支持国际化样式（i18n）与主题切换，核心在于**分离语言/区域相关的样式逻辑（如文字方向、字体族、间距习惯）和视觉主题逻辑（如颜色、圆角、阴影）**，并借助构建工具（如 Webpack、Vite、Rollup）在编译时按需注入或替换对应资源。这不是运行时 CSS 变量的简单切换，而是构建阶段的静态资源组织与条件打包。
语言相关样式：用 CSS :lang() 与独立 RTL/LTR 文件解耦
文字方向（LTR/RTL）、数字书写习惯、标点位置等属于语言层，应避免硬编码 direction 或 float。推荐方式：
- 主样式中统一使用逻辑属性（margin-inline-start 替代 margin-left，text-align: start 替代 text-align: left）；
- 对必须覆盖的旧组件或第三方库，用 :lang(ar), :lang(fa), :lang(he) { direction: rtl; } 声明，不依赖 class 控制；
- 若需深度定制 RTL 布局（如翻转 flex-direction、padding-inline），可提取为 ltr.css / rtl.css，构建时根据 targetLang 字段选择引入（Webpack 的 DefinePlugin + 条件 import，或 Vite 的 define + 动态 import.meta.glob）。
主题样式：按主题拆分变量 + 构建时注入
颜色、间距、字体大小等主题变量不宜全靠 CSS 自定义属性（:root）运行时切换——这会增加 JS 体积和首屏样式抖动风险。更可靠的做法是构建时生成多套 CSS：
- 将主题变量写入 themes/light.variables.css 和 themes/dark.variables.css，仅含 :root 块；
- 业务样式（如 button.css）只引用 var(--color-bg)，不写具体值；
- 构建脚本读取环境变量（如 VITE_THEME=dark），在入口 CSS 中 @import './themes/dark.variables.css';，其余样式文件保持不变；
- Vite 用户可用 defineConfig({ define: { __THEME__: JSON.stringify('dark') } }) + 配合插件动态重写 import 路径。
构建工具集成示例（Vite）
以 Vite 为例，实现“语言+主题”双维度打包：
立即学习“前端免费学习笔记（深入）”；
- 目录结构：src/styles/base.css（通用逻辑样式）、src/styles/lang/ar.css（阿拉伯语增强）、src/styles/theme/corporate.css（企业蓝主题）；
- 在 vite.config.ts 中配置 build.rollupOptions.input 为对象，如：{ 'app-en-light': 'src/entry.en.ts', 'app-ar-dark': 'src/entry.ar.ts' }；
- 每个 entry.ts 引入对应语言基础样式 + 主题变量 + 组件样式，构建后产出独立 HTML/CSS 包；
- 无需运行时加载，CDN 可缓存各版本，SEO 友好，也规避了 FOUC。
注意边界：什么不该放进 CSS 国际化
以下内容不属于 CSS i18n 范畴，应交由 JS 层或服务端处理：
