bem类名难读的根源是编辑器未将__和--识别为语义分隔符，需通过highlight等插件自定义语法高亮，配合构建工具禁用误删修饰符的压缩、前端渲染关闭html转义，才能实现全链路支持。
直接改编辑器配置，别指望靠肉眼盯 class 名分辨 BEM 结构。BEM 本身不是给编辑器看的，是给人和构建工具协同用的；源码难读，本质是编辑器没把 __ 和 -- 当作语义分隔符高亮，而只是当成普通字符。
为什么 BEM 类名在编辑器里看起来一团乱
HTML 编辑器默认按标签、属性、字符串做基础语法着色，class 属性值内部全当纯文本处理。像 header__title--large 这种串，编辑器既不识别 __ 是 element 分隔符，也不感知 -- 是 modifier 标记——它只看到一长串字母加下划线，颜色和普通字符串完全一样。
- VS Code、Sublime、Vim 等主流编辑器原生都不支持 BEM 语义高亮
- 即使开了 HTML 语法高亮，
class="menu__item menu__item--active"中的__item和--active也不会变色或加粗 - 某些插件（如 Auto Rename Tag）会因双下划线误判为变量命名风格，导致重命名出错
用插件让 BEM 结构“浮出来”
必须借助支持自定义语法着色的插件，核心是把 __ 和 -- 当作 token 规则注入 HTML 模式中。实测有效的方案只有两个：
-
VS Code：装
Highlight插件 + 自定义highlight.regexes配置，例如匹配\b\w+__(\w+)并给__加橙色背景，匹配--\w+加青色下划线 -
Sublime Text：用
ApplySyntax+ 自定义HTML (BEM).sublime-syntax文件，在class值内部分别捕获__和--段落并赋予 scope（如support.class.bem.element）
注意：不要用“BEM Highlighter”这类名字花哨但已停更的插件，它们大多只改颜色不改 scope，无法联动其他功能（比如跳转到 block 定义）。
Prism.js / Highlight.js 高亮时 BEM 类名被转义或截断
这是前端展示环节的典型问题，和编辑器无关，但容易混淆。现象是：<pre class="brush:php;toolbar:false;"><code class="html"><div class="btn__text--bold"></div></code></pre> 渲染后，btn__text--bold 在页面上显示成 btn_text_bold 或直接消失。
- 根本原因是 HTML 转义未关闭：服务端模板（如 PHP、Django）或 CMS（如 PHPCMS）默认对
class属性值做htmlspecialchars()处理，把_当普通字符放过，但某些老版本会过滤双下划线 - Prism.js 1.29+ 默认启用
ignoreUnescapedHTML: false，若代码块里含未闭合标签，整个class值可能被 parser 截断 - 解决方案：前端渲染前确保
class字符串未经二次转义；用Prism.highlightElement(el, { ignoreUnescapedHTML: true })显式关闭校验
BEM 的可读性瓶颈不在命名规则本身，而在工具链断层：编辑器不识结构、构建工具乱压缩、前端库误解析——每个环节都得单独打补丁，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
