.rate--half不能写成.rate-half，因为--是bem修饰符的强制分隔符，否则会被解析为新block，导致语义断裂和css权重失控；正确应使用.rate__item--disabled等规范格式。
为什么.rate--half不能写成.rate-half
因为--是BEM中修饰符（Modifier）的强制分隔符，写成.rate-half会被解析为一个全新Block，而非.rate的变体。这会导致两个问题：一是语义断裂——后续加.rate-full或.rate-readonly时，它们彼此之间毫无继承关系；二是CSS选择器权重失控，比如.rate-half和.rate权重相同，覆盖逻辑不可预测。
实际开发中常见错误：.rate-item-disabled这种写法直接把状态塞进Element名，违反BEM“状态必须由Modifier表达”的原则。正确做法是保持结构类不变，仅切换修饰符：.rate__item--disabled，且该修饰符必须与.rate__item共存。
评分组件的BEM块、元素、修饰符怎么一一对应HTML结构
以标准五星评分为例，HTML应严格按Block→Element→Modifier层级展开：
-
.rate是块（Block），代表整个评分容器，不可脱离上下文单独使用 -
.rate__item是元素（Element），对应每个星星输入项，必须嵌套在.rate内，禁止独立出现 -
.rate--readonly、.rate--large是块级修饰符，描述整体行为或尺寸变体 -
.rate__item--active、.rate__item--hovered是元素级修饰符，只影响单个星星的状态样式
错误示例：.rate-item（漏掉__）、.rate__star（用非语义词替代item）、.rate__item__icon（非法嵌套Element）——这些都会破坏BEM结构校验，stylelint会直接报错。
React中用CSS Modules配合BEM时，类名生成容易踩哪些坑
文件名必须与Block名完全一致，比如组件叫Rate，CSS文件必须是Rate.module.css，里面只能写.rate、.rate__item、.rate--half这类以.rate开头的类。否则styles.rate__item返回undefined，但styles['rate__item']可能取到——这通常是因为文件名大小写不匹配（如文件是rate.module.css，JS里却按Rate访问）。
手写类名字符串风险极高：
- 拼错
__或--（比如rate-item或rate_half） - 漏空格或拼出
rate--undefined（当Modifier值未受控时） - 绕过类型检查，导致编译期无提示、运行时样式丢失
推荐用bem工厂函数封装：const rateBem = bem('rate')，再通过classnames组合：cn(styles.rate, rateBem.m('readonly'), { [styles[rateBem.e('item')]]: isActive })。所有类名必须来自rateBem，禁用字面量字符串。
半星、只读、大号等修饰符如何确保跨项目复用不冲突
BEM修饰符不是视觉描述，而是可枚举的状态标识。比如.rate--half必须明确表示“支持半星选择”，而不是“看起来像半个星星”；.rate--readonly表示“不可交互”，而非“颜色变灰”。这样才能保证在不同项目中语义一致。
关键约束：
- 修饰符必须依附宿主存在：
.rate--half不能单独使用，必须和.rate一起写在class属性里 - 禁止跨块复用修饰符名：不要在
user-card--half里复用--half，除非它真和评分的“半”含义一致 - 响应式修饰符要统一前缀：
.rate--mobile比.rate-mobile更可靠，且必须在媒体查询中通过display或transform控制，而非删DOM
最容易被忽略的是修饰符的“作用域绑定”——它不是独立样式开关，而是块/元素的语义延伸。一旦脱离宿主类，就失去BEM意义，也失去工具链（如postcss-bem-linter）的校验能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
