BEM + scoped 是分工协作：BEM 管命名意图与模块归属，scoped 管作用域不外溢；Block 名必须与组件文件名一致（如 UserCard.vue → user-card），否则语义断裂、样式混乱。

BEM + scoped 不是“加个前缀就完事”，而是 Block 命名必须与组件强绑定、scoped 只负责不外溢，两者缺一不可——否则类名还是乱，样式照样崩。

Block 名必须和 Vue 文件名一致，小写+短横线

这是最容易被跳过的硬规则。比如组件叫 UserCard.vue，Block 名就得是 user-card，不是 card、user 或 userCard。一旦偏离，BEM 的模块归属语义就断了：

• user-card__avatar ✅ —— 一眼知道属于哪个组件、哪个逻辑单元
• __avatar ❌ —— 编译报错，SCSS 中 & 嵌套失效
• avatar ❌ —— 和其他组件的 avatar 冲突，scoped 挡不住这种内部混乱
• UserCard__avatar ❌ —— 大驼峰在 CSS 中非法，且破坏 BEM 小写约定

Element 必须用双下划线连接，且不能脱离 Block 独立存在

Element 是 Block 的“零件”，不是通用工具类。user-card__header 合法；但单独写 __header 或 header 就等于放弃 BEM 的结构约束：

• 模板里写 <div class="user-card__header">，样式里必须用 .user-card__header 或 SCSS 的 &__header，不能漏掉 Block 前缀
• 禁止出现 user-card__header__title —— 这是嵌套 Element，违反 BEM 分层，应改为 user-card__header-title 或拆成独立 Block
• scoped 不会帮你校验这个，全靠命名自觉。一旦漏写前缀，调试时根本分不清这个 title 是谁家的

Modifier 只用于可预测的状态变更，不为“好看”而加

修饰符不是装饰语法糖，而是 CSS 的状态开关。它只在存在明确视觉/行为差异时才引入：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• user-card--compact ✅ —— 改变 padding、font-size，有明确上下文（如列表密度切换）
• user-card__avatar--large ✅ —— 同一元素不同尺寸变体，可组合使用
• user-card--default ❌ —— 默认态无需修饰符，加了反而让基础样式依赖冗余类
• user-card__avatar--large--rotated ❌ —— 多修饰符连写难维护，应拆成 user-card__avatar--large user-card__avatar--rotated

::v-deep 穿透时，必须包裹在 BEM 容器下

想改 el-button 样式？别直接在 scoped 里写 .el-button——它完全匹配不到。正确路径是“容器限定 + 精准穿透”：

• 模板中包一层 BEM 容器：<div class="user-card__action-btn"><el-button>编辑</el-button></div>
• 样式中只穿透该容器下的目标：.user-card__action-btn ::v-deep(.el-button) { height: 32px; }
• 这样既避免全局污染，又让修改意图可追溯：谁要调按钮样式，就找 user-card__action-btn 这个上下文，而不是满项目搜 el-button
• 注意：::v-deep 仅对当前 scoped 块生效，不会影响其他组件

真正难的不是写对 user-card__avatar--hover，而是每次加新类名时，都得问一句：它属于哪个 Block？有没有更上层的语义容器？scoped 能拦住样式外溢，拦不住命名失焦——后者只能靠团队对 Block 边界的共识来守住。