仅实现样式隔离，不约束类名语义；bem需手动落地，核心是block对应独立vue组件，命名须体现模块归属与状态逻辑。
Vue 的 <style scoped></style> 并不能自动帮你写出语义清晰、可维护的类名——它只做样式隔离，不解决命名混乱。BEM 是必须手动落地的约定，不是开箱即用的功能。
为什么 <style scoped></style> 不能替代 BEM
scoped 通过属性选择器（如 .article-card[data-v-f3f2e1c4]）实现作用域封闭，但对类名本身无约束。你仍可能写出：.title、.content、.btn 这类泛化名称，导致：
- 在父子组件嵌套时，
.title被多个<style scoped></style>块重复定义，调试时难以定位来源 - 当需要复用某个子组件（如
DocumentItem.vue）到搜索页或回收站页时，其内部.item类与新上下文中的同名词冲突 - 团队成员看到
.list__item不知道它属于哪个逻辑模块，而.document-item__name一眼可判归属
document-item 该不该挂靠到 document-listing 下
取决于这个子组件是否具备跨上下文复用能力。不是“能不能”，而是“要不要”封装成独立 Block：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 如果
DocumentItem.vue只在DocumentListing.vue中使用，且样式强依赖父容器（如继承主题色、行高、间距），用.document-listing__item合理 - 如果它要出现在搜索结果、最近文档、共享链接等多个页面，就必须是独立 Block：
.document-item，内部用.document-item__image、.document-item__size - 禁止混合写法：
.document-listing__document-item__image—— 这既违反 BEM 分层原则，又让类名失去可读性
Modifier（修饰符）不是装饰品，而是状态开关
修饰符不是为了“看起来高级”，而是为可预测的状态变化提供 CSS 入口。它只在存在视觉/行为差异时才引入：
- 正确：
.document-item--highlighted（用于标记当前选中项）、.document-item--compact（用于列表密度切换） - 错误：
.document-item--default或.document-item--normal—— 默认态无需修饰符，否则所有基础样式都得配一个冗余类 - 避免修饰符嵌套：
.document-item__icon--large--rotated应拆为.document-item__icon--large和.document-item__icon--rotated，便于组合与覆盖
如何在 Vue 中减少手写 BEM 类名的出错率
纯手写 .block__element--modifier 容易漏字符、错分隔符。推荐两种轻量方案：
- SCSS 中用
@mixin b($block)封装命名空间（如$namespace: 'app'），调用@include b('document-item') { ... }自动生成.app-document-item块级样式 - TypeScript 中用
createNamespace('document-item')工具函数，模板里写:class="documentItem.bem('item', 'image', 'large')"，生成document-item__item--large（注意：这里item是 Element 名，非 Block 名） - 不建议全局注册 mixin 或指令——BEM 是组件级契约，强行统一前缀反而削弱 Block 的语义独立性
最常被忽略的一点：BEM 的 Block 必须对应一个真实存在的、有明确职责边界的 Vue 组件文件。看到 .user-card__avatar 却找不到 UserCard.vue，说明命名和结构已脱节——这时重构比加注释更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
