BEM类名不可缩写——缩写会破坏工具链识别和团队协作基础，因stylelint、编辑器高亮、Sass bem()函数均依赖__和--锚点正则匹配，缩写导致三重失效；真正应优化的是语义层级而非字符串长度。
BEM 类名不能缩写——强行截断或简写会直接破坏工具链识别和团队协作基础。
为什么缩写 BEM 名字等于自废 lint 和高亮
所有依赖 BEM 结构的工具（stylelint-selector-bem-pattern、VS Code 的 Highlight 插件、Sass bem() 函数）都靠 __ 和 -- 这两个锚点做正则匹配。一旦你把 user-profile-card__avatar-upload--drag-and-drop 缩成 user-prof-card__avatar-upld--dnd，就触发三重失效：
-
stylelint无法校验结构合法性，CI 不报错但实际已失守 - 编辑器插件匹配不到
__或--，高亮和跳转全部失效 - Sass 中
@function bem()依赖完整单词生成类名，缩写后变量名和类名对不上
真正该压缩的是语义层级，不是字符串长度
长名字往往暴露的是组件职责过载，而不是命名本身的问题。比如出现 dashboard-analytics-report-filter-panel__date-range-picker__calendar-icon，问题不在“怎么缩”，而在“为什么三层嵌套还塞进一个 Block”：
- 把
date-range-picker提升为独立 Block：date-range-picker+date-range-picker__calendar+date-range-picker__icon -
calendar-icon若在多处复用（如弹窗、表单、侧边栏），它自己就是calendar-iconBlock，不依附于任何父级 - 删掉冗余修饰词：用
date-range-picker--compact替代date-range-picker--small-and-compact-without-label
当业务术语确实太长时，用 CSS 变量替代 Modifier 字符串
遇到像 payment-method-selection-flow__step-indicator--show-credit-card-form-on-submit 这种不可读的 Modifier，说明它已经不是状态描述，而是执行逻辑：
- 把它拆解为可组合的布尔变量：
--step-show-credit-card: true、--step-show-billing-address: false - HTML 中只写
payment-method-selection-flow__step-indicator，JS 控制style属性注入变量 - CSS 内部用
@media (supports (--step-show-credit-card: true))或 JS 驱动的 class 切换，避免类名膨胀
最常被忽略的一点：BEM 的“长”是刻意为之的——它用字符数换可追溯性。当你想缩写时，优先检查是不是组件边界画错了、Modifier 是否承担了本该由 JS 或 CSS 变量做的事，而不是去动那个 __。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
