BEM在小项目中不必强制使用，应按复用性判断：仅当组件跨≥2个路由/父组件复用时才启用BEM建模；纯页面独有样式可用单class，工具类与BEM可并存但需分层清晰。
小型项目里BEM类名写太长，是不是在自找麻烦？
不是过度设计，而是用法错位。BEM本身不强制要求“所有元素都必须带 block 前缀”，它的约束力只在「当需要模块化隔离时才启用」。小项目没那么多复用场景、没有多团队协作压力、CSS 文件不到 200 行——这时候硬套 .header__logo--dark 这种三段式命名，反而增加认知负担和维护成本。
关键判断点：这个样式会不会被其他地方复用？有没有可能被另一个组件意外覆盖？如果答案都是“几乎不可能”，那它就不需要 BEM。
- 纯页面级独有样式（如
home-hero）可直接用单 class，不加 block 前缀 - 临时状态类（如
is-loading、has-error）保持全局工具类语义，不塞进某个 block 下 - Vue 单文件组件中，若
<template></template>仅被本组件使用，其内部 class 可简化为card-title而非card__title，前提是card不作为跨组件 Block 发布
怎么判断哪些组件该按 BEM 规范拆？
看复用路径，不是看视觉复杂度。一个只有两行文字的 status-badge，只要它在用户列表、订单详情、通知弹窗里都出现，就必须升格为独立 Block：status-badge（block），status-badge__text（element），status-badge--success（modifier）。
反例是把所有带 icon 的按钮都叫 btn__icon，结果发现 search-btn__icon 和 submit-btn__icon 动画逻辑完全不同——这说明它们根本不属于同一个 block，应各自建 search-button 和 submit-button。
- 组件是否出现在 ≥2 个不同路由或父组件中？是 → 按 BEM 建模
- 它的子结构（如 icon、label、count）是否从不单独抽离使用？否 → 那它大概率不该是 element，而该是独立 block
- 是否存在“改一个 modifier 就得同步改 JS 判断逻辑”？存在 → modifier 合理；若只是纯视觉微调（如边框粗细），直接用 CSS 自定义属性更轻量
按需引入 BEM 的具体落地方式
不要全局启用 BEM 约束，而是以组件为单位开关。比如在 Sass 中，只对明确标记为 @use "bem-mixins" 的文件启用嵌套规则，其余样式文件保持扁平结构。
HTML 层也一样：不强求每个 div 都带 block class，而是只在真正需要作用域隔离的位置加，例如模态框内容区、表单字段组、卡片容器这些天然具备复用潜力的节点。
- Webpack/Vite 构建时，用
postcss-bem插件仅处理/components/目录下的 CSS，跳过/pages/和/layouts/ - Vue 组件中，用
defineOptions({ name: 'UserProfileCard' })显式声明 block 名，再通过class="user-profile-card"启动 BEM 上下文，而非靠目录名自动推导 - 禁止在
main.css或reset.css里出现任何__或--，这类文件只负责基础排版与重置
最容易被忽略的边界：工具类与 BEM 的共存规则
很多人以为用了 BEM 就不能用 mt-4、text-center 这类工具类，其实不然——BEM 管的是业务模块的作用域，工具类管的是原子级样式复用。两者可以并存，但必须分层清晰。
问题出在混用：比如给 button__text 同时加 text-sm 和 font-bold，后续别人想改字体粗细就得查两个地方；或者在 card__body 上写 grid-cols-2，结果 grid 布局逻辑泄漏到业务 class 里。
- 工具类只能用于布局调整（
flex、gap-2）、文本基础样式（text-xs）、颜色语义（bg-primary），不能侵入业务语义 - BEM class 必须能独立表达完整意图，删掉所有工具类后，结构仍可读、样式仍可用
- Vue 中推荐用
:class动态绑定工具类，BEM class 写死在模板里，避免逻辑耦合
