国际化不破坏BEM结构，问题在于将文案或语言代码塞入类名（如button--confirm-en），导致CSS膨胀、维护困难、PurgeCSS误删；应解耦语言与状态类，用html[lang]微调样式，长文案拆Block而非缩Element。
国际化本身不破坏BEM结构，真正出问题的是把文案内容直接塞进类名（比如button--confirm-en），或为不同语言写重复的Modifier类——这会让CSS体积膨胀、维护失控、PurgeCSS误删。
别用语言代码当Modifier后缀
常见错误是给每个语言写一个类：button--confirm-en、button--confirm-zh、button--confirm-ja。这类类名：
- 无法被PurgeCSS识别使用场景（它只扫描HTML中实际出现的字符串）
- 一旦新增语言，就得同步改CSS、JS、HTML三处
- 文案变长（如德语bestätigen）会直接拉长类名，但BEM不是为拼文案服务的
文案长度变化应由CSS弹性机制消化
按钮文字变长时，靠类名控制宽度或换行是错的。正确做法是：
- 用min-width + white-space: nowrap + overflow: hidden保底线
- 或启用text-overflow: ellipsis配合max-width
- 需要自适应宽高时，用fit-content或inline-flex布局，而不是写button--wide-de这种类
状态类名必须与语言解耦
按钮是否“可点击”“已提交”“加载中”，和当前语言无关。这些状态该用布尔型Modifier：button--disabled、button--loading、button--submitted。
- 不要写button--loading-en或button--disabled-zh
- JS切换状态时，只操作语义类，不拼语言标识
- 如果需要按语言微调样式（如日语按钮需更大内边距），用html[lang="ja"] .button选择器，而非新增BEM类
长文案组件优先拆Block，不缩Element
遇到多语言下标题超长、卡片描述溢出等场景，不要把“多行文本”硬塞进card__title里强行撑开，而是：
- 抽出text-block作为独立Block，带自己的text-block--truncate、text-block--multiline等有限Modifier
- 让card__content只负责容器布局，不承担文案渲染逻辑
- 这样即使德语文案让text-block高度翻倍，也不会污染card的命名或样式边界
最常被忽略的一点：国际化测试阶段发现类名变长，第一反应不该是“怎么缩写”，而是检查这个类名是否本就承载了不该由CSS负责的职责——比如把文案对齐方式、字重、行高都塞进Modifier，其实这些该由设计系统变量统一控制。
