逻辑属性优先因其天然响应direction和writing-mode，无需函数或条件判断，编译体积小、维护成本低；如margin-left→margin-inline-start，text-align:left→text-align:start。
直接用逻辑属性（margin-inline-start、text-align: start等）替代物理属性，是目前最轻量、最可靠的方式；rtl-val()函数和:dir(rtl)仅在必须兼容老浏览器或需动态注入方向时才值得引入。
为什么优先用逻辑属性而不是rtl-val()函数
逻辑属性天然响应direction和writing-mode，无需额外函数、变量或条件判断，编译后体积小、维护成本低。
-
margin-left→ 改成margin-inline-start，在 LTR 下等于margin-left，RTL 下自动映射为margin-right -
text-align: left→ 改成，语义更准确，且不会和 <code>direction冲突 -
float: left没有安全的逻辑等价物，应改用float: inline-start（Chrome 104+ / Firefox 103+ 支持），或直接上display: flex -
rtl-val(16px, 0)看似灵活，但每个调用都增加 SCSS 编译负担，且无法被 CSS 压缩工具识别优化
:dir(rtl) 在什么场景下必须用
当需要对 SVG 图标、背景图路径、transform 等无逻辑等价物的属性做方向适配时，:dir(rtl) 是唯一能精准匹配“计算后为 RTL”的 CSS 方式。
-
.icon-arrow { transform: scaleX(-1); }必须包裹在.icon-arrow:dir(rtl)里，否则会全局翻转 -
background-image: url('arrow-l.svg')要写成:dir(rtl) { background-image: url('arrow-r.svg'); }，不能依赖rtl-val()直接嵌套在url()中（会报错Invalid CSS after "url(rtl-val("） - 局部 RTL 内容（如阿拉伯语评论块）可设
<div dir="rtl">，再用 <code>div:dir(rtl) .meta精准控制，避免污染全局html[dir="rtl"] - Safari ≤15.3 不支持
:dir()，若需兼容，得回退到[dir="rtl"]属性选择器——但注意它不匹配浏览器自动推断的方向 - 只写
body { direction: rtl; }→ 文字流变了，但<input>光标仍从左进、清除按钮位置错乱、:dir(rtl)规则不匹配 - 必须写
→ 所有原生控件按 RTL 行为重新初始化，:dir(rtl)才能生效，lang="ar"或lang="ug"对此无影响 - SSR 页面若服务端没输出
dir="rtl"，客户端 JS 后补无效：CSS 已解析完毕，:dir(rtl)规则根本没参与匹配 - 维吾尔文（
lang="ug"）必须同时设dir="rtl"和专用字体（如Noto Sans Uyghur），否则字母连写和元音标注会断裂 - SVG 内联图标含文字时，需重置：
.icon-text:dir(rtl) { transform: scaleX(-1); } .icon-text:dir(rtl) span { transform: scaleX(-1); } -
url(rtl-val('a.svg', 'b.svg'))语法错误，正确写法是：:dir(rtl) { background-image: url('b.svg'); }+ 默认状态用background-image: url('a.svg'); - Font Awesome 图标别在 SCSS 里硬写
fa-rotate-180，用现成的fa-flip-horizontal类更稳妥，且支持 JS 动态切换 - 慎用
unicode-bidi: bidi-override——它强制打断浏览器双向算法，容易让混合文本（如阿拉伯语中嵌英文 URL）显示错乱
direction: rtl 和 html[dir="rtl"] 的区别在哪
关键在“谁决定方向”：CSS 的 direction 只影响渲染，HTML 的 dir 属性才触发浏览器完整的 RTL 感知机制（包括表单光标、选区、屏幕阅读器顺序）。
图标和背景图翻转最容易踩的坑
transform: scaleX(-1) 看似简单，但它会把子元素文字也镜像，而背景图路径又不能直接用函数插值——这两点常被忽略。
真正麻烦的不是写几行 RTL 样式，而是当逻辑属性、:dir()、direction、writing-mode 和第三方组件库混在一起时，方向继承链和优先级会瞬间失控。建议先全局统一用 html[dir] 控制根方向，再逐层用逻辑属性收口，最后只对 SVG 和背景图这类“哑资源”用 :dir(rtl) 精准修补。
