bem 类名问题根源在于人眼难拆解层级、编辑器不识别语义分隔符、构建工具误处理__和--；需配置编辑器高亮、禁用非法scss嵌套、用css变量替代冗余modifier、注释划分区块并审视组件职责。
长类名本身不是问题，真正卡住的是人眼无法快速拆解层级、编辑器不识别语义分隔符、以及构建工具误删或混淆 __ 和 --。
让编辑器把 __ 和 -- 当成分隔符高亮
BEM 类名在 VS Code 或 Sublime 里看起来一团乱，是因为默认语法着色把 header__title--large 当作普通字符串处理。它不区分哪段是 Block、哪段是 Element、哪段是 Modifier。
- VS Code 推荐装
Highlight插件，加如下配置："highlight.regexes": { "(\w+)__(\w+)": { "filterFileRegex": "\.css$|\.scss$", "decorations": [ { "color": "#ff9500", "backgroundColor": "#fff3cd" } ] }, "(--\w+)": { "filterFileRegex": "\.css$|\.scss$", "decorations": [ { "color": "#007aff", "textDecoration": "underline" } ] } } - 别用名字带“BEM Highlighter”的停更插件——它们只改颜色，不设
scope，没法联动跳转或 lint - Sublime 用户需手动写
HTML (BEM).sublime-syntax，把__捕获为support.class.bem.element，--设为support.class.bem.modifier
禁止 SCSS 嵌套生成破坏 BEM 结构的选择器
&__title { } 看着省事，但一旦混进条件逻辑（比如 &.is-open { &__title { } }），就可能产出 .card.is-open__title 这种非法选择器——浏览器能解析，但人脑无法映射回 BEM 意图。
- SCSS 中只允许一层
&__xxx或&--xxx，且必须直接挂载在 Block 根选择器下 - 状态控制交给 JS：用
card--expanded而非.card.is-expanded .card__header - 禁用
stylelint-selector-bem-pattern的ignore选项，让它在 CI 阶段报错.card__header--active这类合法但易歧义的写法（Element 上加 Modifier 是允许的，但应确保该 Modifier 确实属于这个 Element）
用 CSS 自定义属性替代冗余 Modifier 类名
当 Modifier 实际只控制颜色、圆角、间距等可变量时，硬写 button--theme-primary--size-xl--variant-outline 是重复劳动，且难以组合和覆盖。
- 在 Block 根上定义变量：
.button { --button-color: #007bff; --button-padding: 12px 24px; --button-border-radius: 4px; } - 用
data-属性驱动：<button data-theme="danger" data-size="lg"></button>，JS 动态设置style="--button-color: #dc3545" - 避免在
:root下塞业务变量；Safari 对@keyframes中 CSS 变量的支持直到 v16.4 才完整，动画关键帧里仍需保留类名兜底
长类名堆砌时必须用注释划分 BLOCK/ELEMENTS/MODIFIERS 区域
一个 .card.module.css 文件有 30+ 类名平铺，没有视觉锚点，人眼就失去定位节奏。这不是语法问题，是信息密度失控。
- 每个区块用固定格式注释：
/* ========================================================================== BLOCK: card ========================================================================== */，后面空一行 - Element 区块只放
.card__xxx，Modifier 区块只放.card--xxx和.card__xxx--xxx，禁止混入 - 禁用编辑器自动折叠（如 VS Code 的 “Fold Comments”），改用插件按注释折叠——搜索
BLOCK:就能跳到对应模块 - SCSS 中不用真实嵌套，改用行注释分组：
// === ELEMENTS ===，否则&__title { &--highlighted { } }会掩盖结构
最常被忽略的一点：长类名往往意味着组件职责过载。如果一个 Block 的 Modifier 列表超过 4 个，或者 Element 名称里出现 content、inner、container，那就该停下来重审结构，而不是继续优化命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
