可读性差源于类名堆砌缺乏视觉锚点和语义分组，需用注释明确划分block/elements/modifiers区域、确保文件名/类名/jsx访问键严格对齐、禁用字符串拼接类名。
可读性差不是BEM命名本身的问题，而是类名堆砌后缺乏视觉锚点和语义分组——加注释和分段标识是成本最低、见效最快的补救手段。
为什么 .module.css 文件一眼望不到头
一个典型的 .card.module.css 可能包含 30+ 个平铺类名：.card、.card__header、.card__title、.card--featured……它们没有结构提示，编辑器默认折叠也无意义。人眼需要区块边界来快速定位，而纯类名列表不提供任何视觉节奏。这不是语法问题，是信息密度失控。
用注释明确划分 BLOCK / ELEMENTS / MODIFIERS 区域
别写模糊注释如 // Header styles。BEM 的三层结构本身就是天然分区依据，注释要直接映射它：
/* ========================================================================== BLOCK: card ========================================================================== */
.card { /* … */ }
<p>/<em> ========================================================================== ELEMENTS ========================================================================== </em>/
.card<strong>header { /<em> … </em>/ }
.card</strong>title { /<em> … </em>/ }
.card<strong>body { /<em> … </em>/ }
.card</strong>footer { /<em> … </em>/ }</p><p>/<em> ========================================================================== MODIFIERS ========================================================================== </em>/
.card--featured { /<em> … </em>/ }
.card__title--highlighted { /<em> … </em>/ }</p>
- 每个
/* ========================================================================== */块之间空一行，形成视觉呼吸感 - 注释文字必须带冒号和关键词（
BLOCK、ELEMENTS、MODIFIERS），方便Ctrl+F搜索 - 禁止在
ELEMENTS区块里混入Modifier类，否则破坏分区逻辑 - 在 SCSS 中禁用
&__title { }这类嵌套生成——它会掩盖 BEM 结构，让注释失效
文件名、类名、JSX 访问键必须严格对齐
这是保证开发链路可追溯的核心约束，也是最容易被忽略的执行点：
- React 组件叫
Button.tsx，CSS 文件就必须是Button.module.css（PascalCase，无下划线、无前缀） -
Button.module.css里只允许出现以.button开头的类：✅ .button、.button__icon、.button--primary；❌ .btn__icon、.Button__icon、.button-icon - JSX 中必须用字符串访问：
styles['button__icon']✅，styles.button__icon❌（语法错误），styles['Button__icon']❌（大小写不匹配） - 验证方式很简单：
console.log(styles)看输出对象里有没有button__icon这个 key；再打开 DevTools 查编译后类名是否以Button_button__开头
动态组合类名时别绕过 styles 对象
手写字符串拼接 `button ${isActive ? 'button--active' : ''}` 看似简单，实际等于放弃 CSS Modules 的全部优势：
- 字符串里的
button--active不经过styles映射，构建后可能根本没被引入，样式静默失效 - TypeScript 无法校验拼写，
button--primar这种错不会报错，只在页面上漏样式 - 推荐用
clsx+ BEM 工厂函数：const b = bem('button')，然后clsx(styles.button, styles[b.m('primary')], { [styles[b.e('icon')]]: hasIcon }) - 禁止在
clsx里传入未声明的动态片段，比如clsx('button', `button--${dynamic}`)——这会让 linter 失效，也失去 IDE 自动补全能力
真正影响可读性的从来不是下划线数量，而是类名是否能在编辑器里被快速定位、在协作中被准确理解、在重构时被安全替换——所有这些，都依赖于注释分区、命名对齐、访问方式三者的一致性，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
