BEM过度设计怎么破？按需引入来优化

BEM并非万能银弹，其价值在于模块化隔离而非形式主义命名，小项目中盲目套用三段式类名反而徒增负担；真正关键的是按复用性做精准判断——仅当组件跨两个及以上路由或父组件复用、存在样式冲突风险时，才启用BEM建模，其余场景完全可用简洁单class、语义化工具类或轻量CSS自定义属性；通过组件级开关、构建时按目录处理、显式声明block名等方式实现“按需引入”，让BEM回归本质：为协作与复用服务，而非为命名而命名。

小型项目里BEM类名写太长，是不是在自找麻烦？

不是过度设计，而是用法错位。BEM本身不强制要求“所有元素都必须带 block 前缀”，它的约束力只在「当需要模块化隔离时才启用」。小项目没那么多复用场景、没有多团队协作压力、CSS 文件不到 200 行——这时候硬套 .header__logo--dark 这种三段式命名，反而增加认知负担和维护成本。

关键判断点：这个样式会不会被其他地方复用？有没有可能被另一个组件意外覆盖？如果答案都是“几乎不可能”，那它就不需要 BEM。

• 纯页面级独有样式（如 home-hero）可直接用单 class，不加 block 前缀
• 临时状态类（如 is-loading、has-error）保持全局工具类语义，不塞进某个 block 下
• Vue 单文件组件中，若