其实，HTML类名写得再长，本身并不会让你读不懂CSS。真正阻碍你理解思路的，是大量类名堆叠在一起，完全丧失了结构感——.card、.card__header、.card__title--highlighted全部挤在文件中，你找不到视觉锚点，代码编辑器也无法帮你折叠。解决这个问题，靠的不是缩写或删减字符，而是显式分区和工具配合。
用注释划分 BLOCK / ELEMENTS / MODIFIERS 区域
别让CSS文件变成一长串平铺的类名列表。BEM本身的三层结构就是天然的分区依据，注释应当直接映射这种结构：
/* ==========================================================================
BLOCK: card
========================================================================== */
.card { /* … */ }
/* ==========================================================================
ELEMENTS
========================================================================== */
.card__header { /* … */ }
.card__title { /* … */ }
.card__body { /* … */ }
/* ==========================================================================
MODIFIERS
========================================================================== */
.card--featured { /* … */ }
.card__title--highlighted { /* … */ }
- 每个区块之间空一行，营造视觉上的呼吸感
- 注释文字必须包含
BLOCK、ELEMENTS、MODIFIERS这些关键词，方便通过Ctrl+F快速定位 - 绝对禁止在
ELEMENTS区块中混入MODIFIERS类（例如.card__title--highlighted必须严格放置在MODIFIERS区域） - 在SCSS中禁用
&__title { }这种嵌套生成选择器的方式——它会掩盖BEM结构，让注释分区形同虚设
禁用 SCSS 嵌套生成类名
SCSS 的 &__title 这种写法，看起来省事，但实际上是埋下了隐患。它把结构逻辑隐藏在了预处理器中，导致最终生成的CSS根本无法反推BEM层级，你辛苦建立的注释分区也就失去了意义。
- 所有类名必须显式书写，例如
.card__title，而不是依靠&动态拼接 - 如果使用了
@extend，确保被继承的类名仍然符合BEM规范，并且出现在对应的注释区块中 - 构建时开启
postcss-bem-linter，它能自动检测出.card__title--highlighted是否被误放在ELEMENTS区域，或者是否出现了非法嵌套
配置编辑器按注释折叠代码
VS Code、Sublime Text 这些编辑器，默认情况下并不识别BEM注释为折叠单元。你需要手动进行配置，让 /* ========================================================================== BLOCK: ... */ 变成可折叠的节点。
- VS Code：安装
Highlight插件，然后在settings.json中添加highlight.regexes，匹配/* ===+ BLOCK: w+ ===+*/ - Sublime Text：使用
ApplySyntax加载自定义的HTML (BEM).sublime-syntax，将注释行设置为meta.block.bem作用域 - 折叠之后，你一眼就能看出“这个文件包含哪几个 Block”，而无需滚动200行去寻找
.user-card__a vatar - 注意：不要使用那些已经停更的 “BEM Highlighter” 类插件，它们只改变颜色而不设置作用域，无法实现联动折叠或跳转
工具链闭环比命名规则更重要
再规范的注释，如果没人检查也就等于没写。BEM 可读性下降，往往始于第一次没有人 review 掉 .card__title--large--bold--highlighted 这种堆叠 Modifier 的情况。
- 在 CI 流程中加入
stylelint-config-bem，对 Modifier 数量、命名格式、嵌套深度进行硬性校验 - 本地开发时启用
eslint-plugin-css-modules（如果使用 CSS Modules 的话），防止styles['card__title--highlighted']这种字符串访问方式绕过类型检查 - 最容易被忽略的一点：注释分区和编辑器折叠只解决了“看得清”的问题，但真正让 BEM 规范长期运转下去的，是每次 PR 都有人盯着
MODIFIERS区域是否混入了新类名，以及postcss-bem-linter报错是否被忽略
