不需要。BEM不感知文本方向，dir是HTML语义属性，CSS中不应以此分支；应保持类名稳定，用logical属性和:dir(rtl)伪类适配RTL，避免--mirrored等破坏解耦的修饰符。
RTL布局下BEM类名要不要加 dir 属性判断？
不需要。BEM本身不感知文本方向，dir 是HTML层控制的语义属性，CSS里不该用它做样式分支依据。强行在选择器里写 [dir="rtl"] .btn--primary 会破坏BEM的命名稳定性，也增加维护成本——同一个组件在不同方向下类名逻辑分裂，后续改样式或重构时容易漏掉某一边。
正确做法是：保持类名不变，只通过CSS逻辑适配方向。BEM的 block、element、modifier 结构照常使用，镜像靠属性值翻转，而不是靠新增类名或条件选择器。
哪些CSS属性必须用 logical 值替代物理方向值？
所有涉及“左右”的物理方向属性，在RTL适配中都该优先换为logical等价写法。否则镜像会失效或需重复写两套规则。
-
margin-left→margin-inline-start -
padding-right→padding-inline-end -
text-align: right→text-align: end -
float: left→float: inline-start -
border-left-width→border-inline-start-width
注意：flex-direction: row-reverse 和 direction: rtl 不是等价方案——前者只影响Flex子项顺序，后者还影响表单控件、文字换行、text-align: start/end 等行为。BEM组件内部应统一依赖 direction 的继承，而非手动反转Flex。
修饰符 --mirrored 是不是个好主意？
不是。添加 --mirrored 这类修饰符等于把方向逻辑泄露到HTML结构里，违背BEM“样式与语义解耦”原则。组件使用者本不该关心自己用了RTL还是LTR；镜像应由环境自动触发，而非靠开发者手写 class="input input--mirrored"。
真正需要修饰符的场景是功能差异（如 --disabled、--compact），不是方向适配。RTL镜像属于基础渲染层行为，应通过CSS作用域 + logical属性 + :dir(rtl) 伪类完成：
/* 推荐：用 :dir(rtl) 隔离方向逻辑，不影响BEM结构 */
.button {
padding-inline-start: 16px;
padding-inline-end: 12px;
}
.button:dir(rtl) {
/* 只覆盖需要翻转的部分，比如图标位置 */
&__icon {
margin-inline-start: 8px;
}
}
这样既保持 .button__icon 类名纯净，又避免全局污染或重复声明。
IE11兼容时logical属性怎么处理？
IE11完全不支持 inline-start 等logical属性，也不能识别 :dir() 伪类。如果项目仍需支持IE11，必须降级为物理方向 + [dir="rtl"] 包裹，但仅限于最低限度的回退规则：
- 主样式全部用logical写法（现代浏览器）
- 在单独的
@supports not (margin-inline-start: 0)块里补物理方向规则 - 绝不把
[dir="rtl"]写进BEM类名层级（如.menu[dir="rtl"] .menu__item），而是在顶层包裹：[dir="rtl"] .menu__item
关键点在于：BEM类名体系始终一致，方向适配只是CSS输出的“皮肤”，不是结构的一部分。一旦混淆，后续升级到logical属性时就得重写大量HTML和CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
