组件类名必须严格匹配文件名且启用CSS Modules驼峰转换，BEM命名需遵循Block/Element/Modifier规范，禁用后代选择器与泛名类，确保样式可定位、提取与卸载。
组件类名必须严格匹配文件/目录名
这是热插拔能成立的底线。比如组件路径是 src/components/DatePicker/DatePicker.jsx，主类名就必须是 DatePicker，不能是 date-picker、calendar-btn 或 DatePickerComponent。一旦不一致，CSS Modules 的哈希映射、构建时的按需提取、甚至 SSR hydration 都会断链。
常见错误现象：Button.css 里写的是 .btn，但组件文件叫 PrimaryButton.jsx；结果在另一个页面引入 SecondaryButton 时，两个组件共用同一份 .btn 样式，禁用状态互相覆盖。
- Block 名必须是 PascalCase（首字母大写）且与组件名完全一致
- Element 和 Modifier 必须从 Block 派生：
DatePicker__input、DatePicker--range、DatePicker__trigger--open - 禁止跨块混用：
Button__trigger出现在 DatePicker 文件里，属于命名污染
CSS Modules 配置必须启用驼峰转换
Webpack/Vite 默认开启 CSS Modules，但若没配 localsConvention: 'camelCaseOnly'，JS 层就无法安全引用 BEM 类名。比如 .DatePicker__input 编译后变成 datePickerInput，你才能写 styles.datePickerInput —— 否则只能靠字符串拼接 styles['DatePicker__input']，一改名就崩。
不这么做，后果很直接：组件样式无法随 JS 动态加载/卸载，构建工具识别不出“这个类只属于这个组件”，也就谈不上热插拔。
立即学习“前端免费学习笔记（深入）”；
- 确保构建配置中 CSS Modules 的
localsConvention是'camelCaseOnly'（Vite 默认值，Webpack 需手动加） - 组件内只通过
className={styles.DatePicker}或clsx(styles.DatePicker, { [styles.DatePickerRange]: isRange })控制类名 - 绝对不要手拼字符串：
className={`DatePicker DatePicker__input ${isDisabled ? 'DatePicker--disabled' : ''}`—— 这绕过了 CSS Modules，等于放弃热插拔
禁止使用非 BEM 类参与样式定义
只要出现一个泛名类或属性选择器，整个组件的样式隔离就失效了。比如在 DatePicker.css 里写了 div.DatePicker、[data-type="date"] 或 #datepicker-root，构建工具就无法把它和组件绑定，运行时也无法精准卸载。
更隐蔽的问题是：这类选择器在开发期看似正常，但组件复用到 iframe 或微前端子应用时，DOM 上下文一变，样式立刻丢失或错位。
- 所有样式规则必须以 BEM 类名为唯一入口：
.DatePicker、.DatePicker__input、.DatePicker--range - 禁用后代选择器：
.DatePicker .input→ 必须改成.DatePicker__input - 清底用
:where(.DatePicker) { all: unset; }，再逐个声明，避免外部 reset 穿透
Modifier 值必须可枚举、语义化、与业务对齐
热插拔不是把类名换掉就行，而是要让状态变更可预测、可批量替换。写 DatePicker--loading 看似合理，但它暴露了实现细节；换成 DatePicker--busy 或 DatePicker--pending 才表达用户意图，也方便主题系统统一接管。
如果 modifier 值不可枚举（比如动态拼接 DatePicker--${status}），构建工具无法静态分析依赖，CSS 就没法按需提取，热替换时还可能漏样式。
- 禁止视觉描述：
--blue、--small、--left - 禁止临时标签：
--v2、--new、--temp - 允许修饰 element，但仅限该 element 自身状态：
DatePicker__trigger--open合法；DatePicker__trigger--in-modal越界（这是容器上下文，不该由 trigger 决定）
