掌握 CSS BEM 是大型 SaaS 系统存活的底线，它通过块名前缀（如 billing-form__submit）解决样式归属、影响范围和安全删除问题，需结合 HTML 结构约束、SCSS 嵌套规则、目录契约、stylelint 强校验及与 CSS-in-JS 的协同规范来落地。
掌握 CSS BEM 不是“加分项”，而是大型 SaaS 系统能活过三个月的底线——它不解决视觉问题，只解决「谁改的样式、影响了谁、能不能安全删」这个协作生死线。
为什么 SaaS 系统里 .btn 会引发线上事故
一个 SaaS 后台常同时加载 Dashboard、Billing、Settings 三个路由模块，它们可能都用 <button class="btn">。浏览器不管这些 btn 来自哪个模块，只按 CSS 加载顺序和权重决定最终样式。某人给 Billing 模块加了 .btn { padding: 8px }，结果 Settings 页面的提交按钮高度塌陷——这不是 bug，是类名没携带归属信息的必然结果。
-
btn这种类名在 SaaS 中等于裸奔：无块归属、无状态标识、无从属关系 - 审查元素时看到
btn，你得翻 5 个文件才能确认它属于哪个业务域 - CI 流水线里没人敢删旧 CSS，因为不知道删掉的
.btn--loading是 Dashboard 还是 Audit Log 在用
如何让 BEM 在 SaaS 多租户场景下真正生效
BEM 类名本身是字符串，但它的约束力必须穿透到 HTML 结构、构建流程和目录组织。SaaS 的多租户特性（比如白标定制、租户主题切换）会让松散写法立刻暴露问题。
- HTML 必须显式声明完整类名：
<button class="billing-form__submit billing-form__submit--disabled">，禁止靠.billing-form .btn模拟作用域 - SCSS 中只允许
&__element和&--modifier嵌套，禁用& a或& > span——否则租户覆盖样式时会意外污染全局 - 目录结构与块名严格对齐：
/src/modules/billing-form/下只能有billing-form.css，里面只准出现.billing-form、.billing-form__input等前缀 - 修饰符必须语义化：
billing-form__submit--pending✅，billing-form__submit--bg-blue-500❌（后者属于主题层，应由theme-dark这类全局类接管）
stylelint-selector-bem-pattern 怎么配置才不形同虚设
光靠约定没用。SaaS 项目动辄百人协作，必须让工具在保存或提交时立刻拦截非 BEM 写法。
立即学习“前端免费学习笔记（深入）”；
- 在
.stylelintrc中启用stylelint-selector-bem-pattern，并设置componentName为正则^[a-z]([a-z0-9]|-(?=[a-z0-9]))*$，强制块名小写+中划线 - 开启
allowMultipleSlashes为false，拦截user-card__header__title这类非法嵌套 - 配合 VS Code 插件 BEM Tools，输入
billing-form__回车自动列出所有合法元素候选，避免手拼出错 - CI 阶段增加检查：若
settings-page.css中出现.dashboard__nav，直接 fail —— 这说明目录契约已失焦
BEM 和 CSS-in-JS / CSS Modules 混用时最危险的坑
SaaS 常混合使用多种技术栈，BEM 类名一旦被 JS 动态拼接或覆盖，就失去“可追溯性”这个核心价值。
- 禁止在 styled-components 中这样写：
const Button = styled.button.attrs({ className: 'btn' })，再手动加billing-form__submit—— 此时样式归属分裂，DevTools 里 class 列表出现两个来源 - React 中推荐用工具函数生成：
cn('billing-form__submit', { 'billing-form__submit--disabled': isDisabled })，确保所有类名都来自同一源头 - 第三方组件库（如 Ant Design）不强套 BEM 包裹名，但可在其外层容器加块名：
<div class="billing-form__ant-upload"><Upload /></div>，既保留主题能力，又明确样式边界 - 动态类名拼接必须校验：
className={`${block}__${element}`}要确保block和element都是静态字符串，不能是运行时变量，否则无法被 stylelint 检查
真正难的不是写出 billing-form__submit--disabled，而是当新需求要加一个“导出报表”按钮时，团队是否本能地新建 /modules/report-export/ 目录，而不是往 billing-form.css 里塞 .billing-form__export-btn——这背后是目录契约、CI 检查和最初几个模块的示范性实现共同作用的结果。
