<p>不能混用 和 - 在 BEM 类名中，因为 和 -- 是固定语义分隔符，单 或 - 仅用于名称内部连接；混用会导致解析失败、工具链误判及 CSS 选择器失效。</p>
为什么不能混用 _ 和 - 在 BEM 类名里
因为 BEM 的解析逻辑依赖符号的语义固定性：__（双下划线）和 --（双中划线）是不可替代的分隔符，而单个 _ 或 - 只能用于块名、元素名、修饰符名内部的单词连接。一旦把 modal_close-btn 写成带单下划线的格式，工具链（比如 PostCSS 插件或编辑器高亮）就无法识别这是 Block 还是拼写错误；更糟的是，CSS 属性选择器如 [class*="__"] 会直接失效。
block-name__element--modifier 中每个符号的职责必须严格对齐
实际项目里最常错的是在块名里用了下划线，比如写成 user_profile，结果后续必须写 user_profile__avatar——这违反了 BEM 基础规则：块名本身只允许用 -（kebab case），否则整个命名链断裂。正确做法是：
-
user-profile✅ 是合法块名 -
user-profile__avatar✅ 元素必须用__连接 -
user-profile__avatar--rounded✅ 修饰符必须用--连接 -
user_profile__avatar❌ 单下划线破坏解析边界 -
user-profile-avatar❌ 缺少分隔符，无法区分是 block 还是 element
SCSS 中用 &__ 和 &-- 时，- 仍要手动保持一致
很多人以为 SCSS 嵌套能自动处理连字符，其实不然。写 .user-profile { &__avatar { ... } } 生成的是 .user-profile__avatar，没问题；但如果你在修饰符里手误写成 &__avatar--large，它依然合法——问题出在 large 本身是否该用 - 连接。像 avatar--full-size 是对的，avatar--fullsize 就丢失语义。关键点：
- 修饰符值内部用
-分隔单词，不是_，也不是驼峰 - 不要为省事把
is-active改成isActive，后者无法被 CSS 选择器或 BEM 工具识别 - 避免用数字开头的修饰符，如
--2x，CSS 不支持类名以数字开头
当设计系统要求多语言或动态块名时，下划线风险会放大
比如后端返回 block_name 字段，前端直接拼成 ${block_name}__content，结果生成 header_footer__content——这已经不是 BEM，而是两个块名粘连的“怪物”。真正安全的做法是预处理：统一将下划线转为中划线，并校验是否含非法字符。简单脚本示例如下：
立即学习“前端免费学习笔记（深入）”；
function normalizeBlockName(str) {
return str
.replace(/_/g, '-')
.replace(/[^a-z0-9-]/g, '')
.replace(/-+/g, '-')
.replace(/^-|-$/g, '');
}
// normalizeBlockName('user_profile') → 'user-profile'
不处理这个环节，BEM 就只是写在文档里的规范，不是跑在浏览器里的代码。
