BEM类名过长影响CSS阅读的优化方法

其实，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 报错是否被忽略