小项目中不应硬套完整bem，而应按需降级：css≤3个文件、无跨路由复用、团队≤2人时启用bem-lite模式，允许block-element等简化写法，禁用三层嵌套，仅当子结构可能独立复用才保留element层，modifier默认不启用，状态交由js控制或通用工具类处理。
小项目里硬套完整 BEM，不是规范严，是没想清楚谁需要这个隔离。 你写一个单页活动页、内部工具登录框、或者三屏运营页，CSS 总量不到 100 行，连全局 .btn 都没人改——这时候还坚持 login-form__submit-button--primary，类名长度已经压过了可维护性本身。
什么时候该砍掉 element 层？
Element（双下划线部分）只在“这个子结构可能被单独复用或样式逻辑独立”时才值得存在。否则就是冗余。
- 纯展示型结构，如
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（双短横）能不能全删？
可以，而且推荐在极小项目中默认不启用。Modifier 的价值在于状态显式化，但小项目里状态往往靠 JS 控制开关，CSS 层只需响应 is-loading 这类通用类即可。
- 别写
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 就崩样式
怎么判断“极小项目”该用什么命名粒度？
看三个硬指标，任一满足就降级：
- CSS 文件总数 ≤ 3 个（如
base.css,layout.css,components.css） - 无跨路由/跨页面复用的 UI 单元（即所有组件只在一个
.vue或.html里出现） - 团队 ≤ 2 人，且无外部协作或交接计划
满足后，直接切到 BEM-Lite 模式：block__element 和 block--modifier 仍可用，但不强制；允许 block-element（单短横）或 block-element（无分隔）作为过渡；禁止 block__element__subpart 这种三层嵌套。
最容易被忽略的一点：所谓“过度设计”，往往不是 BEM 本身的问题，而是把 HTML 结构层级当成了命名依据。比如写 page__section__header__title，其实 section 和 header 早该是独立 block —— 切得细，反而要写得少。
