BEM修饰符不用于语言切换，lang属性和:lang()伪类才是正确载体；--zh、--en等修饰符违背语义层级、破坏响应性、导致样式耦合，应改用lang声明配合:lang(zh)等原生机制控制排版。
直接说结论：BEM修饰符不用于语言切换，lang 属性和 CSS 的 :lang() 伪类才是排版多语言的正确载体；强行用 --ar、--ja 这类修饰符会破坏语义、污染组件状态、干扰 JS 控制逻辑。
为什么不能用 --zh、--en 这类修饰符控制多语言排版
BEM修饰符描述的是组件的**固有变体或状态**（如 button--disabled、card--featured），而语言是文档级元信息，由 HTML 的 lang 属性声明，与单个组件是否“被启用”“被聚焦”“被折叠”不在同一语义层级。
- 写
heading--zh意味着这个标题“天生是中文”，但实际它可能在运行时通过 i18n 库动态切换为日文——修饰符无法响应这种变化，除非 JS 不停增删类名，违背 BEM 原子性 - CSS 中若写
.heading--zh { font-family: "PingFang SC", sans-serif; }，就锁死了该组件只能服务中文，无法复用于双语页面中同一区块的英文版本 - 工具链（如 PostCSS-BEM-Linter）会把
--zh当作合法 Modifier，但它实际承担了本该由:lang(zh)完成的职责，导致样式层和结构层耦合加深
正确做法：用 lang 属性 + :lang() 控制字体、间距、书写方向
排版差异（如中日韩文字间距、阿拉伯文右对齐、泰文连字）本质是语言特性，不是组件状态。应交由浏览器原生机制处理：
- HTML 根节点写
<html lang="ar">或动态设置document.documentElement.lang = 'ja' - CSS 中用
:lang(ar) .content { text-align: right; }、:lang(ja) .text { letter-spacing: 0.05em; } - 需要覆盖字体栈时，优先用
@font-face配合unicode-range，而非靠修饰符切换font-family
这样做的好处是：无需修改任何组件类名，JS 只需改 lang，整页排版自动响应；也兼容屏幕阅读器的语言播报逻辑。
立即学习“前端免费学习笔记（深入）”；
哪些场景可以（谨慎）用修饰符辅助国际化
仅当某类视觉表现**确实属于组件自身的可选变体**，且与语言无关时，才考虑修饰符。例如：
-
flag-icon--cn/flag-icon--jp：图标组件本身代表国家，--cn是其固有变体（就像icon--home），不随页面语言切换而变 -
date-display--iso：日期格式化组件提供 ISO 格式选项，这是用户主动选择的功能变体，非语言推导结果 - 避免
button--label-zh：按钮文案由 i18n key 渲染，类名不应绑定具体语言内容
最容易被忽略的一点：很多团队在做 RTL 支持时，误以为要加 --rtl 修饰符。其实只要 HTML 有 dir="rtl"，CSS 就该用 [dir="rtl"] .component { ... } 或 :dir(rtl) ——这比任何修饰符都更准确、更轻量、更符合规范本意。
