不能将语言当作BEM修饰符（如.button--zh），因语言是全局文档属性而非组件状态；应以html[lang]为唯一上下文锚点，BEM类只描述组件结构与状态，排版样式通过[lang]选择器统一控制，避免语义错位、维护爆炸、PurgeCSS误删及SSR首屏漏样式。
多语言切换下的排版样式（如字体、行高、文字方向、字间距）不能靠 BEM 修饰符硬编码语言名，而应以 html[lang] 为唯一上下文锚点；BEM 类只负责组件结构和状态，不承担语言语义。
为什么不能写 .button--zh 或 .header--ar
这类类名直接把语言当作组件变体，违背 BEM 修饰符只描述「组件自身状态或意图」的契约。实际问题包括：
-
.button--zh暗示按钮“是中文按钮”，但同一按钮在阿拉伯语页面里仍存在，只是文本内容和字体不同——它不是新变体，而是同一组件在不同语言上下文中的渲染结果 - 所有组件都要配一套语言修饰符：
.card--zh、.input--ar、.nav--es……维护成本爆炸，改个字体要搜遍整个项目 - PurgeCSS 会干掉未在首屏 HTML 中出现的类名（比如用户首次访问是英文页，
.button--zh不在 DOM 里，对应样式被删） - SSR 渲染时 JS 尚未执行，
lang属性已由服务端写入，但.button--zh类若靠客户端 JS 添加，首屏就会漏样式
正确做法：用 html[lang] 控制语言上下文，BEM 类只管组件角色
语言是全局文档属性，不是按钮或卡片的状态。CSS 应这样组织：
- HTML 根节点始终带
lang属性：<html lang="zh">、<html lang="ar"> - BEM 类名保持中立：
.button、.button--primary、.card__title，不掺杂语言信息 - 排版样式统一通过属性选择器定义：
[lang="zh"] .button { font-family: "PingFang SC", sans-serif; }、[lang="ar"] .button { font-family: "Tajawal", sans-serif; text-align: right; } - RTL 布局交由
[lang="ar"]或[dir="rtl"]控制，不要写.button--rtl—— 按钮本身没有“右向布局”状态，是整个文档流的方向变了
混合方案：基础样式共用 + 语言专属文件按需加载
当语言间差异极大（如中日韩字体栈、阿拉伯数字替换、复杂换行规则），可拆分 CSS 文件，但仍需规避类名污染：
立即学习“前端免费学习笔记（深入）”；
- 保留一个主样式表（
base.css），含所有 BEM 结构、颜色、间距、交互态（.button--disabled等） - 另建语言专属文件：
lang-zh.css、lang-ar.css，仅含字体、text-rendering、line-break、font-feature-settings等排版相关规则，且全部基于[lang]选择器 - JS 切换语言时，只动态启用/禁用对应
<link rel="stylesheet">标签，不操作任何 DOM class - 关键细节：所有语言 CSS 文件必须在
<head>中声明，且disabled属性初始设为true，避免 FOUC 或竞态加载
容易忽略的坑：fallback 字体与伪元素语言适配
光靠 [lang] 不够，还得兜底：
-
font-family必须带系统默认 fallback：font-family: "Noto Sans SC", "Helvetica Neue", sans-serif;，否则某语言字体加载失败就全盘回退到无衬线体，中文显示发虚 - 伪元素内容（如
::before { content: "→"; }）不会随lang自动切换，需显式写：[lang="ar"] .button::before { content: "←"; } -
:lang()伪类比属性选择器更精准（能匹配lang="zh-Hans"子类型），但兼容性略低；生产环境建议优先用[lang]，复杂子类型再叠加:lang() - 服务端渲染时，务必确保输出的
html标签lang值与当前语言一致，否则客户端 JS 切换后，CSS 规则已生效但 HTML 属性没同步，排版错乱
