小项目应启用bem-lite模式：css≤3个文件、无跨路由复用、团队≤2人时，允许block-element简化写法，禁用三层嵌套，仅子结构可能独立复用才保留element层，modifier默认不启用。
小项目里硬套完整 BEM，不是规范严，是没想清楚谁需要这个隔离。直接降级用 BEM-Lite 模式，比强行塞满 __ 和 -- 更安全、更轻量。
怎么判断该不该用完整 BEM
满足以下任一条件，就该停手，切到简化模式：
- CSS 文件总数 ≤ 3 个（如
base.css、layout.css、components.css） - 所有 UI 结构只在一个
.vue或.html文件里出现，无跨路由复用 - 团队 ≤ 2 人，且无外部协作或交接计划
这时候写 login-form__submit-button--primary，类名长度已经压过了可维护性本身。
元素层（__element）什么时候可以砍掉
Element 不是“HTML 里有子节点就得加”，而是只在“这个子结构可能被单独复用或样式逻辑独立”时才值得存在。
- 纯展示型结构，比如
hero-section__title→ 直接hero-title更轻，语义不丢 - Vue/React 单文件组件内，
user-card只在UserCard.vue中使用，内部user-card__avatar实际不会抽离 → 改成card-avatar或干脆avatar（前提是无全局冲突） - 工具类已覆盖大部分样式需求（如
u-mb-2、text-center），再加card__content就是重复表达
修饰符（--modifier）能不能全删
可以，而且推荐在极小项目中默认不启用。
- 别写
button--disabled+button--loading+button--success，改用button+is-disabled+is-loading - 如果真要保留 modifier，只留布尔型：
card--expanded✅，card--size-large❌（尺寸交给 CSS 自定义属性或工具类） - 所有
--modifier必须和基础 block 共存：card card--expanded，不能只写card--expanded——否则删 class 就崩样式
最容易被忽略的结构性陷阱
所谓“过度设计”，往往不是 BEM 本身的问题，而是把 HTML 结构层级当成了命名依据。
比如写 page__section__header__title，其实 section 和 header 早该是独立 block —— 切得细，反而要写得少。BEM 的边界感，来自职责划分，不是 DOM 嵌套深度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
