小型项目用BEM不必然过度设计，关键看复用性、协作需求与构建环境：纯静态单页且无复用可降级；但凡存在组件动态挂载、第三方库共存或CSS提取构建，BEM就是防冲突的必要底线。
小型项目用BEM会不会过度设计？
不会，但得看「小」到什么程度。纯静态单页、3个组件以内、无协作需求的个人工具页，硬套BEM确实冗余；但只要项目存在组件复用、后续可能迭代、或至少有2人参与，BEM就不是负担，而是防错底线。
哪些小型项目场景必须用BEM？
以下情况哪怕只有2个组件也建议启用：
- 使用 Vue/React 等框架动态挂载组件（如
#app下同时渲染Header和SearchForm），泛名.title或.btn极易因加载顺序覆盖 - 引入了第三方 UI 库（如 Element Plus 的
el-button），又需要自定义样式——不靠 BEM 隔离，.el-button:hover会和你自己写的.btn:hover撞权重 - 用 Webpack/Vite 构建且开了 CSS 提取（如
mini-css-extract-plugin），全局 CSS 不加作用域，类名一撞就满盘皆输
小型项目怎么轻量落地BEM？
不必全量改造，聚焦三处关键控制点：
- Block 名严格对齐组件名：
UserCard.vue→ 只用user-card，禁用card或user - Element 名只写一层：
user-card__avatar✅，user-card__avatar__img❌（后者应拆成独立avatar-imgBlock 或改用user-card__avatar-img） - Modifier 用状态而非视觉：
button--loading✅，button--red❌；搭配:root变量控制颜色，避免硬编码 - JS 拼类名必须封装：
cn('input', 'disabled')比手拼`input input--${disabled}`少踩80%空格/连字符漏写问题
容易被忽略的构建陷阱
BEM 类名写对了，样式照样跑飞——90% 出在构建配置上：
立即学习“前端免费学习笔记（深入）”；
-
css-loader开了modules: true？它会把user-card__title哈希成_1a2b3c__title，BEM 失效 - 用了
:global(.button)却没删同文件里其他非 global 声明，导致一半类名被局部化、一半泄露 - SCSS 里写嵌套：
.user-card { .title { } }编译后是.user-card .title，破坏 BEM 封装性，必须平铺写.user-card__title
.btn 泄露，就能让整个页面按钮样式失守。 
