bem不支持基于lang属性自动生成功能修饰符，因modifier需显式写入class属性，css无法监听dom属性变化；正确做法是模板层根据lang上下文动态拼接如nav--lang-zh类名，并确保与基础block共存。
BEM本身不支持直接基于lang属性生成Modifier，必须手动映射或借助构建时/运行时逻辑生成对应类名。
为什么不能直接写 .header--lang-zh 并靠 [lang="zh"] .header--lang-zh 触发？
因为BEM的Modifier（如--lang-zh）是静态类名，它不感知DOM上的lang属性变化；CSS选择器无法“监听”属性值并自动切换类名。你加了--lang-zh，但HTML没渲染这个类，样式就完全不生效。
常见错误现象： 已设置，但.button--lang-ja 类没出现在按钮上，结果所有语言版本都显示默认样式。
- Modifier必须显式写在元素的
class属性里，不是靠CSS属性选择器“推导”出来的 -
[lang="zh"] .header这种写法虽能定位，但它破坏BEM隔离性——.header的样式逻辑被外部lang属性劫持，后续维护者根本看不出语言变体在哪定义 -
多语言切换若靠JS动态改
lang却不同步更新Modifier类名，会导致视觉与语言状态不一致
lang 值应作为Modifier的输入，而非选择器条件
正确做法是：把语言标识作为Modifier值的一部分，由组件/模板层决定是否添加该类。例如中文页的导航块应渲染为class="nav nav--lang-zh"，日文页则是class="nav nav--lang-ja"。
实操建议：
- 在模板中（如React、Vue或服务端渲染）读取当前
lang上下文，拼出对应Modifier：`nav--lang-${locale}` - 避免硬编码
--lang-zh等值；统一用ISO 639-1小写码（zh、en、ja），不带地区后缀（zh-CN→ 仅用zh） - 如果某Block无需按语言定制样式，就完全不加
--lang-xx；不要为“未来可能需要”提前挂空Modifier - 禁止用
--lang-en-us这种长格式——BEM Modifier值要求简短、可枚举、无分隔符（短横线已用于分隔）
如何避免重复写lang相关类名和CSS规则？
每个--lang-xx都需单独写CSS，但实际差异往往只有文字方向、字体族或少量间距。直接为每种语言写一遍规则会爆炸式增长。
推荐做法：
- 用CSS自定义属性收敛语言相关变量：
:root[lang="zh"] { --text-dir: ltr; --font-family: "PingFang SC", sans-serif; }，然后在.nav里用direction: var(--text-dir) - 只对真正需要差异化渲染的Block才加
--lang-xxModifier；其余靠[lang]属性选择器兜底（注意：这属于BEM边界外的辅助手段，仅限字体、方向等全局基础样式） - 如果项目用PostCSS，可用
postcss-bem插件配合lang变量批量生成规则，但需确认输出类名仍符合BEM语法（如.nav--lang-zh合法，.nav__item--lang-zh也合法）
最易被忽略的一点：语言Modifier必须和Block共存，不能单独出现。比如<div class="nav--lang-zh">是错的，必须是<code><div class="nav nav--lang-zh">——否则它就不是BEM意义上的修饰符，而是一个新Block，后续所有<code>.nav__item都将失去语义归属。
