BEM-Lite是精简版BEM，仅强制block__element和block--modifier两段式命名，允许元素不嵌套、禁止修饰符叠加，不校验文件路径或组件目录绑定。
直接说结论：BEM-Lite 不是“简化版 BEM”，而是去掉约束冗余、保留核心隔离能力的实操裁剪——它只强制 block__element 和 block--modifier 两段式命名，允许元素不嵌套、禁止修饰符链式叠加，且不检查文件路径或组件目录绑定。
为什么中小型项目用不了完整 BEM
完整 BEM 要求块名与目录强绑定、每个元素必须可推导归属、所有修饰符需注册进 lint 规则。这对 5 人以下团队、迭代周期短的运营页或内部工具来说，落地成本远高于收益：没人维护 stylelint-selector-bem-pattern 配置，postcss-bem-linter 报错被注释掉，最终只剩类名带双下划线的“伪 BEM”。
常见错误现象：.card__title 写对了，但 .card__price 在 product-list.css 里定义；或者手写 className="btn btn--primary btn--loading"，结果两个 modifier 同时生效导致样式冲突。
- 不强制 block 必须独占一个目录，只要求所有类名前缀统一（如全用
search-form） - 允许
search-form__input和search-form__button定义在同一个 CSS 文件里，不校验是否跨文件引用 - 禁止
search-form--primary--large这类双连字符叠加，但不对search-form__input--disabled做存在性检查（即不强制先定义search-form__input）
怎么写才算符合 BEM-Lite
BEM-Lite 的边界非常窄：只守住“命名不歧义”和“状态不耦合”两条线。它不管你怎么组织文件、也不管你用不用预处理器嵌套，只盯住最终生成的 CSS 类名字符串。
立即学习“前端免费学习笔记（深入）”；
使用场景：Vue 单文件组件、React 函数组件、纯 HTML + CSS 的营销页
- ✅ 正确：
.user-card、.user-card__avatar、.user-card--compact、.user-card__avatar--loading - ❌ 错误：
.user-card-avatar（缺__）、.user-card--compact--dark（双--叠加）、.card__avatar（块名不一致） - ⚠️ 容忍但不鼓励：
.u-mt-md这类工具类混用在 JSX 中；.user-card .user-card__avatar这种嵌套选择器（只要没用于覆盖逻辑，仅作媒体查询分组）
React/Vue 里怎么避免拼错类名
手拼字符串是 BEM-Lite 最大破口，不是因为语法错，而是漏空格、大小写不一致、连字符写成下划线这些低级错误会让样式静默失效。
实操建议：
- 每个组件定义常量
const BLOCK = 'user-card'，所有类名都基于它生成 - 用
clsx而非模板字符串：clsx(`${BLOCK}__avatar`, { [`${BLOCK}__avatar--loading`]: isLoading }) - 禁止在 JSX 里硬写
className="user-card__avatar user-card__avatar--loading"—— 拼写错误无法被 IDE 或 linter 捕获 - 如果用了
useBem自定义 Hook，确保它返回的函数只接受element和modifier参数，不暴露原始字符串拼接逻辑
哪些地方最容易被忽略
BEM-Lite 的陷阱不在命名格式，而在语义越界：把布局意图塞进 modifier，或让 element 承担跨 block 职责。
例如 .user-card--left 看似合法，但它实际是控制位置，该由 u-float-left 或 grid-column: 1 处理；又比如 .user-card__action 被复用到 admin-dashboard 组件里，结果样式错乱——这说明它不该叫 __action，而该拆成独立 block action-button。
真正难的是判断“这个东西到底算不算当前 block 的一部分”。没有自动工具能回答这个问题，只能靠每次加新类名时多问一句：删掉这个 block，它还能独立存在吗？
