不能直接用 direction: rtl 驱动 BEM 修饰符，因为 BEM 类名（如 header--rtl）需业务逻辑显式添加，direction 属性本身不会自动触发类名注入或样式生效；它仅控制文本流，不感知、不绑定、不操作 DOM 类名。
为什么不能直接用 direction: rtl 驱动 BEM 修饰符
BEM 修饰符（如 header--rtl）不是响应式钩子，它不感知 DOM 的 dir 属性变化，也不会被浏览器自动添加。你写了 .header--rtl { margin-right: 24px; }，但若 HTML 中没手动加这个类，样式就永远不会生效——direction: rtl 不会“触发”它，也不改变类名本身。
常见错误是把 BEM 当成媒体查询替代品：以为给根元素设了 dir="rtl"，就能靠 JS 自动补全所有 --rtl 修饰符。实际上，BEM 类名必须由业务逻辑显式控制，比如服务端渲染时根据语言注入，或客户端初始化时读取 document.documentElement.dir 后批量添加。
- 服务端模板中判断
lang="ar"或lang="ug"，输出class="header header--rtl" - 客户端可监听
document.documentElement.dir变化，用classList.toggle('header--rtl', dir === 'rtl') - 避免在 JS 中硬编码语言映射表（如
{ ar: true, he: true, fa: true }），应统一依赖dir属性值
header--rtl 这类修饰符该定义什么样式
它不该重复 direction 或 text-align 的基础行为，而应专注「物理属性镜像」和「逻辑不可覆盖的翻转点」。比如 margin-left 在 RTL 下会错位，但 margin-inline-start 天然适配——所以 header--rtl 应只处理那些没有逻辑等价物的属性：
- 图标翻转：
.icon--arrow-right.header--rtl { transform: scaleX(-1); } - 绝对定位偏移：
.header__search.header--rtl { right: 16px; left: auto; }（left是物理值，必须手动覆盖） - 背景图锚点：
.header--rtl { background-position: right center; }（background-position不响应direction） - 禁用所有含
-left/-right的物理边距/内边距规则，改用margin-inline-start等逻辑属性，让--rtl修饰符只做兜底
多个 BEM 修饰符叠加时 RTL 状态怎么共存
比如一个按钮同时有 button--primary、button--large 和 button--rtl，关键在于三者语义正交：--primary 控主题，--large 控尺寸，--rtl 控方向。它们可以并列存在，且 CSS 规则需用组合选择器精准命中：
立即学习“前端免费学习笔记（深入）”；
.button--primary.button--rtl { background: linear-gradient(to right, #007bff, #0056b3); }
.button--large.button--rtl { padding-inline-start: 24px; padding-inline-end: 16px; }
注意：button--rtl 本身不定义颜色或尺寸，只参与组合；若单独写 .button--rtl { ... }，容易和基础类或其他修饰符冲突（比如覆盖掉 padding）。
- 所有
--rtl相关规则必须带至少一个其他修饰符前缀，避免全局污染 - 不要写
.button--rtl.button--disabled和.button--disabled.button--rtl两套重复规则——CSS 选择器顺序无关，两者等价 - 构建工具如 PurgeCSS 默认不会识别
button--rtl这类动态类名，需在safelist加/button--rtl/
为什么 :dir(rtl) 比 --rtl 修饰符更轻量，但不能完全替代
:dir(rtl) 是原生 CSS 条件规则，无需 JS 注入、无类名膨胀、不增加 HTML 体积，对 SSR 友好。但它有硬限制：不匹配 lang 属性，只认 dir="rtl" 或强 RTL 字符推断（Safari ≤15.3 支持弱），且无法用于 JS 动态判断后执行逻辑（比如发请求前检查当前方向）。
所以真实项目中往往是混合使用：
- 基础布局、文本对齐、间距用
:dir(rtl)+ 逻辑属性（margin-inline-start等） - 图标翻转、绝对定位、背景图、SVG
transform等必须显式镜像的点，用--rtl修饰符 + 组合选择器 - JS 中需要根据方向做差异化行为（如键盘导航顺序、动画起始方向）时，必须读取
document.dir并切换类名，:dir()无法触发 JS
最易被忽略的是：即使用了 :dir(rtl)，仍要确保 HTML 根节点有 dir="rtl" —— SSR 没注入，客户端再补也晚了，CSS 已解析完毕。
