多单词block名必须用单连字符连接，如user-profile✅；禁用下划线（user_profile❌）和驼峰（userprofile❌），因前者混淆修饰符语义、后者css非法且工具链无法识别。
多单词 Block 名必须用单连字符连接，不能用下划线或驼峰
Block 名本质是组件的“身份标识”，必须可读、可预测、可搜索。user-profile 合法，user_profile 或 userProfile 违规——前者易与 Python/SQL 命名混淆，后者破坏 CSS 类名一致性，且无法被大多数 BEM 工具链识别。
常见错误现象：searchForm 被写进 class，导致 SCSS 中 &__input 编译成 searchForm__input，而 HTML 里却是 class="search-form__input"，样式彻底失效。
- 正确写法：
search-form、user-profile、date-range-picker - 禁止写法：
search_form、searchForm、SearchForm、searchform（全小写但无分隔，语义断裂） - 复合词优先按自然断词：不是
datepicker，而是date-picker；不是cartitems，而是cart-items
Element 名不继承 Block 的多单词结构，保持语义独立
Element 是 Block 的组成部分，命名重点在“它是什么”，而不是“它属于哪个长名字”。user-profile__avatar 正确，user-profile__user-avatar 冗余——user- 前缀已在 Block 中表达，重复即污染语义边界。
性能影响：过长类名会略微增加 CSS 文件体积和 DOM 渲染时的 class 匹配开销（虽微乎其微），但更严重的是破坏可维护性——当 user-profile 改名为 profile-card，所有带 user- 的 Element 名都得手动改，违背 BEM “Block 可独立演进” 的设计初衷。
- 推荐：
user-profile__avatar、user-profile__bio、date-picker__trigger - 禁止：
user-profile__user-avatar、date-picker__date-trigger、search-form__search-input - 例外仅限歧义场景：如
card__link不够明确，可用card__cta-link（cta 是通用缩写，非 Block 名复刻）
Modifier 名禁用连字符拼接多个单词，必须是单一语义词
button--primary-large 看似直观，实为高危写法：它把两个独立状态（主题色 + 尺寸）耦合成一个修饰符，既无法单独开关，也无法被工具提取为变量。真正需要的是 button--primary button--large 并列使用。
容易踩的坑：设计师给标注写“btn-red-lg”，前端直接照搬成 button--red-lg，结果品牌升级换蓝，就得全局搜替换，还可能误伤其他 --red 场景（比如警告提示）。
- 合法 Modifier：
button--primary、button--disabled、card--compact、input--error - 非法 Modifier：
button--primary-large、card--dark-mode、nav--horizontal-scroll - 多状态组合必须空格分隔：
<button class="button button--primary button--disabled"></button>，而非button--primary-disabled
SCSS 中用 &__ 和 &-- 生成类名时，Block 名含连字符不会出错
只要 Block 名本身合规（如 date-picker），SCSS 的嵌套语法就能安全产出正确类名：.date-picker { &__trigger { } &--open { } } → .date-picker__trigger 和 .date-picker--open。这是 BEM 工具链最稳定的支持路径。
但注意：若 Block 名误写为 datePicker，SCSS 仍会忠实地编译出 .datePicker__trigger，而 HTML 中 class 是 date-picker__trigger，样式就断开了——这种错在开发期极难发现，往往上线后才暴露。
- 建议在项目入口 SCSS 文件顶部定义常量：
$block: 'date-picker';，再用.#{$block} { &__trigger { } }，强制统一来源 - 禁用空格嵌套：
.date-picker { .trigger { } }会生成后代选择器，破坏 BEM 隔离性，也违背“元素必须显式声明 class”的原则 - 构建时可接入
stylelint-selector-bem-pattern插件，自动校验date-picker__trigger是否匹配预设正则
BEM 对多单词命名的约束，表面是格式问题，实质是组件边界的物理锚点——每个连字符都在提醒你：这个词组是否真能作为一个不可拆解的语义单元存在。一旦松动，后续的复用、重构、主题切换，都会变成靠人肉对齐的脆弱系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
