React 19中BEM类名需禁用CSS Modules自动哈希，通过modules: { mode: 'icss' }或:global(.search-form__submit) {}保留原始命名，配合BEM工厂函数强制Block上下文，确保SSR/CSR一致且语义清晰。
React 19里怎么写BEM类名才不被自动注入破坏
React 19的CSS Modules默认启用auto模式（即css-loader的modules: 'auto'），它会把所有.xxx类名都当作模块化处理——但BEM要求search-form__submit这种类名必须静态、可预测、全局可见（比如用于E2E测试或第三方库集成）。一旦被哈希成search-form__submit_MxK7，就失去BEM的语义和协作价值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
webpack.config.js或vite.config.ts中显式关闭自动模块化：modules: { mode: 'icss' }（仅处理:global和:local声明） - 或者用
:global(.search-form__submit) { ... }包裹BEM规则，确保类名原样输出 - 禁止在
.module.css里写.search-form__submit裸名——它会被自动哈希，且无法被clsx正确引用
用clsx拼BEM类名时为什么总漏掉Block前缀
常见错误是写className={clsx('button__icon', { 'button__icon--loading': loading })}，看着没问题，但实际button__icon脱离了button这个Block上下文——它本该是button__icon，而不是独立存在的元素。BEM里没有“孤立的Element”，只有“属于某个Block的Element”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 封装一个BEM工厂函数，强制传入Block名：
bem('button', { icon: true, 'icon--loading': loading })→ 返回['button__icon', 'button__icon--loading'] - 禁止在组件里定义
const iconClass = 'button__icon'——这会让审查DOM时看不到Block归属 - 在TypeScript中加类型约束：
type BEMBlock = 'button' | 'search-form' | 'product-card'，避免拼错Block名
React Server Components里BEM类名为何渲染不一致
SSR时服务端生成search-form__submit，客户端hydrate却变成search-form__submit_abc123，触发hydration mismatch警告。这不是React 19新问题，而是BEM类名被CSS-in-JS或动态哈希工具误处理的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- BEM类名必须100%静态字符串，禁用
useId()、Math.random()或任何运行时生成逻辑 - 若用
styled-components，改用css模板字面量+className手动绑定，别依赖styled.button自动生成类名 - 检查构建产物：用
grep -r "search-form__submit" dist/确认服务端和客户端HTML中类名完全一致
第三方组件（如Ant Design）怎么套BEM隔离层
直接给<Button>加className="myapp-button"没用——Ant Design内部仍用.ant-btn，样式泄漏照旧。BEM的隔离不是靠多加一个类名，而是靠DOM层级和作用域边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用wrapper容器明确Block边界：
<div className="myapp-form-field"><DatePicker /></div> - 在CSS中用属性选择器精准覆盖：
.myapp-form-field :global(.ant-picker-input) input { padding: 8px; } - 避免
!important——它会破坏BEM的button--primary对button的自然覆盖链
user-card__avatar合理，但user-card__avatar-wrapper就是信号——Wrapper不是Element，它是实现细节，不该出现在BEM命名里。 
