bem css可读性差源于类名堆砌缺乏视觉锚点，应通过注释明确划分block/elements/modifiers区域、空行分隔、禁用scss嵌套生成、配置编辑器按注释折叠来改善。
HTML类名过长本身不直接影响CSS阅读，真正卡住你的是类名堆砌后失去结构感——.card、.card__header、.card__title--highlighted全挤在文件里，没有视觉锚点，编辑器也折不了。解决它不靠缩写或删字符，而靠显式分区和工具配合。
用注释划分 BLOCK / ELEMENTS / MODIFIERS 区域
别让 CSS 文件变成平铺的类名列表。BEM 的三层结构就是天然分区依据，注释要直接映射它：
/* ==========================================================================
BLOCK: card
========================================================================== */
.card { /* … */ }
<p>/<em> ==========================================================================
ELEMENTS
========================================================================== </em>/
.card<strong>header { /<em> … </em>/ }
.card</strong>title { /<em> … </em>/ }
.card__body { /<em> … </em>/ }</p><p>/<em> ==========================================================================
MODIFIERS
========================================================================== </em>/
.card--featured { /<em> … </em>/ }
.card__title--highlighted { /<em> … </em>/ }</p>
- 每个区块之间空一行，形成视觉呼吸感
- 注释文字必须含
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 等默认不识别 BEM 注释为折叠单元。需手动配置，让 /* ========================================================================== BLOCK: ... */ 成为可折叠节点。
- VS Code：安装
Highlight插件 + 在settings.json中添加highlight.regexes，匹配/\* ===+ BLOCK: \w+ ===+\*/ - Sublime Text：用
ApplySyntax加载自定义HTML (BEM).sublime-syntax，把注释行设为meta.block.bemscope - 折叠后，你能一眼看到“这个文件有哪几个 Block”，而不是滚动 200 行找
.user-card__avatar - 注意：别用已停更的 “BEM Highlighter” 类插件，它们只改颜色不设 scope，无法联动折叠或跳转
工具链闭环比命名规则更重要
再规范的注释，没人检查就等于没写。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报错是否被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
