国际化样式冲突本质是命名、作用域与加载时机叠加导致的“多语言同名类撞车”，需构建时注入locale前缀、复用同一class名、显式声明direction/writing-mode、收口locale样式至2kb locale.css、通过组件库locale配置接管，并按script分组定义字体度量token。
HTML工程化中，国际化语境下的样式冲突不是语言问题，而是命名、作用域和加载时机三者叠加导致的“多语言同名类撞车”——比如中英文版都用 .btn，但各自 CSS 文件独立打包、异步加载，后加载的会覆盖前一个。
class 名带 locale 前缀根本没用
写 .zh-CN-btn 和 .en-US-btn 看似隔离，实则无效：CSS 选择器权重相同，JS 动态切换语言时若只改 document.documentElement.lang，而没同步更新所有元素的 class，旧样式残留；更关键的是，组件库（如 Ant Design）的 .ant-btn 不受 locale 控制，它始终存在且全局生效。
无序列表呈现关键点：
- locale 前缀必须在构建时注入，不能靠运行时 JS 拼接——否则 SSR 渲染和首屏样式不一致
- 同一组件在不同 locale 下应复用同一套 class 名（如
button__primary），而非生成两套 class - 语言切换不应触发全量重绘，只应替换文案和少量 direction / text-align 相关样式
CSS 的 direction 和 writing-mode 必须显式声明
阿拉伯语（RTL）和中文（LTR）混排时，仅靠 dir="rtl" 不足以保证按钮图标顺序、输入框光标位置、滚动条方向正确。浏览器对 direction: rtl 的继承行为不一致，尤其在 flex 容器内，子项的 order 可能被忽略。
正确做法是把布局逻辑下沉到组件级：
- 根容器加
dir属性，同时用[dir="rtl"] .button__icon { order: -1; }显式翻转图标顺序 - 避免用
float或text-align实现 RTL 对齐，改用margin-inline-start等逻辑属性 - 字体 fallback 链里必须包含对应语言的系统字体，否则
font-family: "PingFang SC", sans-serif在阿拉伯设备上会回退到不支持阿拉伯字符的字体，触发浏览器默认样式重置
lang 属性不能替代样式隔离
很多人以为给 加个属性就能让 CSS 自动适配，但 CSS 本身不识别 lang 值——你得手动写 :lang(ar) .button { padding-inline-end: 16px; } 才生效。而这类规则极易遗漏，且无法覆盖第三方组件库的内部样式。
真正可控的方案是：
- 所有语言相关样式，统一收口到一个
locale.css，只含:lang()规则和逻辑属性，体积控制在 2KB 内 - 禁止在
:lang()里写复杂嵌套（如:lang(zh) .header .nav a），权重过高会导致后续调试困难 - 第三方组件库必须通过其提供的 locale 配置入口（如
ConfigProvider.locale）接管，而不是靠 CSS 覆盖
最易被忽略的一点：字体度量（font metrics）在不同语言下差异极大。中文字体的 line-height 默认值比英文字体高 20%，直接复用同一套 spacing token 会导致行距过紧或过松——这不是 class 名冲突，而是设计系统层面对齐缺失，必须在 token 层就按 script 分组定义 lineHeight-sm-zh、lineHeight-sm-en。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
