BEM在SSR和微前端中不可替代，因其是唯一不依赖JS运行时的静态样式契约：后端模板直出HTML时CSS-in-JS类名无法生成，而user-profile__avatar--loading等语义化类名可被跨技术栈消费，且天然隔离、抗DOM结构变化、性能优于嵌套选择器。
因为BEM不是“偏爱”的风格选择，而是当项目进入多人协作、微前端共存、SSR直出或后端模板渲染阶段时，唯一不依赖 JS 运行时就能成立的样式契约。
为什么 BEM 在 SSR 和微前端中不可替代
后端 Java/PHP 模板或微前端子应用直出 HTML 时，CSS-in-JS 和 CSS Modules 的哈希类名根本没机会生成——此时只有 user-profile__avatar--loading 这种纯静态、语义明确的类名能被正确消费。
- 后端工程师能看懂
search-form__input含义，并准确对应到/components/search-form/目录 - 多个子应用共用同一份 CSS 文件时，
checkout-form__input和search-form__input天然隔离，不会因都叫input而互相覆盖 - 即使 DOM 被其他子应用意外插入 wrapper 元素（如
<div class="wrapper"><div class="user-card">...</div></div>），user-card__avatar依然生效；而.user-card .avatar会直接失效
为什么现代浏览器快，但 BEM 仍比嵌套选择器性能强
BEM 的性能优势不在名字长短，而在选择器类型：.user-card__avatar--loading 是单类名，浏览器一次哈希查找即可定位；.user-card .avatar 是后代选择器，必须从右往左逐层向上回溯父节点，DOM 层级越深，开销越显著。
- DevTools → Elements → Computed Styles 面板里，只要看到选择器含空格（如
.card .title），就说明存在潜在回溯开销 - Sass 中写
.user-card { &__avatar { } }安全；但写.user-card { & .user-card__badge { } }会编译出带空格的选择器，破坏隔离性 - 构建后可用
grep -r "\.[a-z]\+ \.[a-z]" dist/快速扫出所有残留空格选择器
为什么 Tailwind 或 CSS-in-JS 项目仍要保留 BEM 类名
Tailwind 管“怎么长”，BEM 管“是谁的”。纯 utility class 的 HTML 不可搜索、无上下文、无法反推组件位置。
立即学习“前端免费学习笔记（深入）”；
-
grep -r "product-card" src/能瞬间定位整个组件边界（模板、样式、JS）；而flex items-center p-4在千组件项目里等于裸奔 - 第三方审计、SEO 工具、Figma 导出标注、埋点系统，全都依赖
product-card__image这类自解释类名，而非tw-6 tw-h-6 - 推荐模式：
<div class="product-card"><div class="product-card__image"></div></div>+ Tailwind 控制内部表现
为什么 CI 拦截比文档更重要
BEM 的失效从不发生在第一次写错的时候，而发生在第 27 次没人拦住的时候。
- 伪 BEM：HTML 写
class="card card--featured"，但 CSS 只定义了.card--featured，删掉修饰符整个组件就崩 - 跨 Block 命名：
card__header__title违反层级规则，IDE 跳转失效，工具链无法校验 - 必须启用
stylelint-selector-bem-pattern并设为error级别，拦截button--primary--large、.card .title等非法模式 - 目录结构强制对齐：
/components/user-card/user-card.css里出现.product-grid__item就该立刻 fail
真正难的不是敲下 __ 和 --，而是在每次加修饰符前，都得确认它是否属于当前 block、是否布尔可组合、是否与目录结构一致——这种边界感，没法靠编辑器补全，只能靠约束和习惯。
