bem本身不处理多语言排版微调，必须配合html[lang]选择器或:dir()伪类；bem仅将语言样式锚定到block上以避免全局污染和语义漂移。
直接结论：BEM本身不处理多语言排版微调，必须配合html[lang]选择器或:dir()伪类；BEM只负责把语言相关的样式“锚定”到具体 Block 上，避免全局污染和语义漂移。
为什么不能只靠 BEM 类名做语言适配
BEM 的block__element--modifier结构是静态、语义化的，它不感知语言方向、字体特性或排版规则变化。写.article__paragraph--arabic看似可行，但实际会带来三个问题：
- 类名膨胀：每种语言都加一个 Modifier，
.article__paragraph--zh、--ja、--he……维护成本指数级上升 - 语义断裂：
--arabic不是组件状态，而是环境特征，违背 Modifier “描述固有变体” 的设计原则 - 无法响应动态切换：用户切语言时，JS 得手动增删一堆类，而
html[lang]天然同步、零成本
正确做法：BEM + html[lang] 双层锚定
把语言专属样式写在html[lang="zh-CN"] .blog-post__paragraph这类组合选择器下，BEM 类名确保作用域精准，html[lang]确保条件自动生效。
- 必须用
html[lang="zh-CN"]，不能只写[lang="zh-CN"]——否则可能匹配到div lang="zh-CN"等干扰节点 - 优先用
html[lang^="zh"]覆盖简体/繁体/香港等变体，但需额外补html[lang="zh-Hans"]（因 BCP 47 规范下它和zh-CN字符串不等价） - RTL 语言如阿拉伯语、希伯来语必须单独写：
html[lang="ar-SA"]、html[lang="he-IL"]，避免用lang^="ar"误伤波斯语fa-IR - 字体栈、行高、字间距等强语言相关样式，应抽离为独立 CSS 文件（如
fonts-zh.css），通过<link rel="stylesheet" data-lang="zh">标记，JS 控制启用
:dir(rtl)才是 RTL 排版的主力，[lang]只管字体和微调
方向切换（如 flex-direction、text-align、inset-inline-start）必须依赖:dir(rtl)，它由 HTML 的dir属性驱动，比[lang]更可靠、更底层。
- 按钮图标位置别写
margin-left: 8px，改用margin-inline-end: 8px，它在 LTR/RTL 下自动翻转 - 消息气泡箭头定位必须用
inset-inline-start，物理值left/right在 RTL 下直接反向失效 -
[lang="he"]适合加载希伯来字体、设置引号样式；:dir(rtl)负责翻转箭头、调整对齐——两者并用，但职责分明 - 绝对禁止在
[lang]规则里写direction: rtl，这会覆盖真实dir属性，导致嵌套方向混乱
最容易被忽略的细节：伪元素和 flex 子项在 RTL 下完全依赖逻辑属性
很多人以为加了html[lang="ar-SA"]就万事大吉，结果发现伪元素定位错乱、flex 子项顺序反了——根本原因在于没切换到逻辑属性体系。
-
::before的content: "«"在阿拉伯语界面该显示为"»"，得靠:dir(rtl) .blog-post__title::before { content: "»"; } - 表格列头含多语言内容时，
[lang="ja"] th设text-align: center，而:dir(rtl) th设text-align: right，避免日文居中、阿拉伯文也居中造成视觉失衡 - 富文本中嵌入英文术语时，需用
[lang="en"] { unicode-bidi: embed; direction: ltr; }强制保持 LTR 断行，否则会被父容器:dir(rtl)带偏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
