bem 是 html[lang] 选择器安全生效的必要前提，它通过单类名结构隔离样式作用域，避免语言切换时漏样式或误覆盖；所有语言相关样式必须绑定在 bem 类上，优先使用描述意图的修饰符（如 --localized）而非实现细节（如 --rtl），并禁止直接修饰第三方类名。
html[lang] 选择器必须搭配 BEM 才能安全生效
单独用 html[lang="zh-CN"] .header__logo 看似合理，但一旦项目里存在非 BEM 类名（比如 .logo 或 .header .logo），语言切换时就会漏样式或误覆盖。BEM 的单类名结构让 html[lang] 规则只作用于明确归属的块，不会因 DOM 层级变动而失效。
常见错误现象：html[lang="ar-SA"] .button 生效了，但这个 .button 同时被用户管理页和支付页共用，结果阿拉伯语下两个页面按钮同时变 RTL，而支付页其实需要保持 LTR 排版。
- 必须确保所有语言相关样式都绑定在 BEM 类上，例如
html[lang="ar-SA"] .header__nav--rtl，而不是泛泛地改.header__nav - 禁止在 BEM 外层加 wrapper 再写
html[lang] .my-wrapper .btn—— 这又退回到嵌套选择器，失去 BEM 隔离性 - RTL 微调优先用修饰符（
header__nav--rtl）而非重写整个块，避免重复定义flex-direction、text-align等
BEM Modifier 是多语言状态切换的最小安全单元
把语言差异抽象成可开关的 -- 修饰符，比靠 JS 动态切 class 名或拼接字符串更可控。比如 button__label--arabic 和 button__label--chinese 可以并存，互不干扰，也方便用 clsx 统一管理条件渲染。
容易踩的坑是把语言当成布局逻辑硬编码进修饰符名，比如 card__title--right-to-left —— 这个名字既冗长又不可复用，且无法应对阿拉伯语里某些标题仍需 LTR 显示的例外场景。
- 修饰符应描述「意图」而非「实现」：
card__title--localized✅，card__title--rtl❌ - 字体、行高、字间距等微调，建议用 CSS 自定义属性配合
html[lang]设置，而不是塞进 Modifier 类名 - Modifier 不要跨语言混用：不要让
button--primary在中文环境表现一种 padding，在阿拉伯语环境又表现另一种 —— 这违背修饰符“状态稳定可预测”的原则
第三方 UI 库与 BEM 共存时，语言适配必须收口到 Block 容器
Ant Design 或 Element Plus 的类名没法改，但它们的样式泄漏会直接破坏 html[lang] 的精准控制。唯一可靠的做法是把它们包进你自己的 BEM Block，并用容器类承接语言逻辑。
典型错误：在 .ant-btn 上直接写 html[lang="ja-JP"] .ant-btn { letter-spacing: .05em } —— 这条规则可能被其他框架同名类意外触发，也可能因 Ant Design 升级后类名变更而彻底失效。
- 正确做法：用
<div class="my-form__ant-date-picker-wrapper"></div>包裹组件，然后写html[lang="ja-JP"] .my-form__ant-date-picker-wrapper .ant-calendar-input - 所有语言专属样式只写在你自己定义的 Block 或 Element 上，第三方类名仅作后代选择器使用，不直接修饰
- 构建后检查 dist/ 中是否残留
.ant-.*[lang]类型规则，grep -r "ant-.*\[lang\]" dist/ 可快速定位破功点
html[lang] 就只是个看起来很美的装饰品。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
