CSS Modules与BEM必须协同而非替代：文件名（PascalCase）、类名（.block__element）、JSX访问键（styles['block__element']）三者须严格一致，缺一不可。
两者解决的不是同一类问题：CSS Modules 是构建时作用域隔离机制，BEM 是人工命名结构约定。混用时出错，往往是因为把它们当成了替代方案，而不是协作关系。
为什么 styles.button__icon 总是 undefined
这不是 BEM 写错了，也不是 CSS Modules 配置漏了，而是文件名、类名、JSX 访问键三者没对齐——这是唯一且必须满足的前提。
-
Button.module.css文件名必须 PascalCase，且与组件名（如Button.tsx）完全一致；button.module.css或MyButton.module.css都会导致styles对象里压根没有button__icon这个键 - CSS 文件中只能声明以
.button开头的类：.button、.button__icon、.button--primary✅；.btn__icon或.button-icon❌ - JSX 中访问必须用字符串键：
styles['button__icon']✅；styles.button__icon语法报错，styles['Button__icon']大小写不匹配也会返回undefined - 验证方式很简单：打开浏览器开发者工具，看生成的类名是否以
Button_开头；再console.log(styles)看键名是否存在、拼写是否一致
localIdentName 怎么配才不掩盖问题
默认的哈希名（如 Button_button__abc123）会把原始语义藏掉，调试时根本看不出来源。但配得太“可读”，又可能掩盖映射断裂。
- 推荐配置：
localIdentName=[name]__[local]___[hash:base64:5]，编译后是Button__button___abc123，一眼能定位到文件和类名 - 千万别全局开启
modules: true，否则所有.css都被模块化，重置样式、第三方库样式全乱套；应只匹配/\.module\.css$/ - TypeScript 项目必须加
declare module '*.module.css'，否则import styles from './Button.module.css'直接类型报错
动态拼类名时，为什么不能手写字符串
写 {`button ${isActive ? 'button--active' : ''}`} 看似省事，实际绕过了 CSS Modules 的校验，也丢掉了 TypeScript 类型保护。
立即学习“前端免费学习笔记（深入）”；
- 空格控制不可靠：条件为 false 时可能留下多余空格，变成
"button " - modifier 值易拼错：
button--disabled写成button--disbaled，运行时静默失效 - 字符串字面量不会被
postcss-bem-linter检查，也不参与styles对象的键校验 - 正确做法是封装 BEM 工厂函数：
const b = bem('button')，然后用classnames(styles.button, styles[b.m('active')])，所有产出都来自函数，可控且可测
BEM 的 __ 和 -- 是人定的契约，CSS Modules 的哈希是机器生成的保障——前者松动一寸，后者就兜不住底。最常被忽略的是：哪怕你写了 100 行完美 BEM，只要文件名大小写差一个字母，styles 就永远拿不到那个键。
