BEM可读性差源于类名堆砌缺乏视觉锚点，应通过注释明确划分BLOCK/ELEMENTS/MODIFIERS区域、空行分隔、禁用嵌套生成、配置编辑器按注释折叠来改善。
可读性差不是BEM命名本身的问题，而是类名堆砌后缺乏视觉锚点和语义分组——加注释和分段标识是成本最低、见效最快的补救手段。
为什么BEM文件容易“一眼望不到头”
一个典型的 .card.module.css 可能包含 30+ 个类名：.card、.card__header、.card__title、.card__body、.card__footer、.card--featured、.card__title--highlighted……它们全平铺在文件里，没有结构提示，编辑器折叠也无意义。
这不是语法问题，是信息密度失控：人眼需要区块边界来快速定位，而纯类名列表不提供任何视觉节奏。
用 CSS 注释明确划分 Block / Element / Modifier 区域
别写“// 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>/ }
- 每个
/* ========================================================================== */块之间空一行，形成视觉呼吸感 - 注释文字必须带冒号和关键词（
BLOCK、ELEMENTS、MODIFIERS），方便 Ctrl+F 搜索 - 禁止在 Element 区块里混入 Modifier 类，否则破坏分区逻辑
在 SCSS 中用嵌套注释替代真实嵌套
SCSS 支持 // 行注释，但禁止用 &__title { } 这种嵌套生成选择器——它会掩盖 BEM 结构，且编译后无法反查。正确做法是用注释模拟层级，保持 CSS 输出扁平：
.card {
// —— ELEMENTS ————————————————————————————————
&__header { /* … */ }
&__title { /* … */ }
&__body { /* … */ }
<p>// —— MODIFIERS ————————————————————————————————
&--featured { /<em> … </em>/ }
}
- 注释行以
// ——开头，用破折号对齐，比星号更轻量、更易扫视 - 保留
&是为了减少重复输入，但所有规则仍输出为.card__title等标准 BEM 类名 - 绝对不要出现
&__title &__icon（带空格）——那是后代选择器，违反 BEM 隔离原则
VS Code 插件与自动折叠配置
光靠人工注释不够，得让编辑器“懂”你的分区意图：
- 装插件
TODO Highlight，把// —— ELEMENTS ——标为高亮区域，滚动时一眼锁定 - 在
settings.json里配折叠规则："editor.foldingStrategy": "indentation"不够用，改用"editor.foldingStrategy": "auto"+ 安装Custom CSS and JS Loader加载自定义折叠逻辑 - 禁用默认的
.card__*折叠——它会把所有 element 折成一团，反而更难定位；只允许按注释区块折叠
真正难的不是写注释，而是每次新增一个 .card__meta 时，顺手把它拖进 ELEMENTS 区块里，而不是随手扔在文件末尾。这个动作本身就在强化团队对 BEM 结构的肌肉记忆。
