不遵循bem会导致全局css迅速不可维护——类名冲突、样式覆盖、dom变更失效是必然结果；bem通过块-元素-修饰符命名隔离样式，需配合stylelint校验、禁用后代选择器与多连字符修饰符，并在ssr/微前端中作为硬性前提。
为什么 .header 改一次就崩三个页面
老项目里 .header、.btn、.list 这类泛义名，在不同模块中被多人重复定义是常态。重构时你只改了 components/header/Header.css，但 pages/home/Home.module.css 和 layouts/sidebar/Sidebar.css 里也各有一个 .header。浏览器不认“上下文”，只匹配字符串，结果首页轮播图的导航栏、侧边栏折叠按钮、用户卡片顶部区域全被连带重置。
- 真实错误现象：
Computed面板里看到margin-top: 0来自第 1894 行，而你刚改的是第 372 行——中间隔了 6 个子应用打包进来的 CSS 文件 - BEM 的解法不是加前缀，而是用命名切断隐式依赖：
user-profile__header和product-list__header天然隔离，改一个不影响另一个 - 必须配合工具链校验：Stylelint 的
selector-bem-pattern规则要设为error级别，否则.header .logo这种后代选择器会在 CI 阶段漏过，上线后 DOM 结构一变样式就失效
为什么嵌套选择器（.card .title）是重构埋雷点
写 .card .title 看似省事，实则把样式绑死在 DOM 层级上。一旦组件被抽成 npm 包、或微前端子应用插入 wrapper 元素，.card > .title 就断开了。BEM 要求所有样式由单类名触发：.card__title 不依赖父容器是否存在，哪怕外层多套三层 <div class="wrapper-1"><div class="wrapper-2">…，它照样生效。
<ul>
<li>SCSS 中最危险的写法：<code>& .card__price（中间有空格）——编译后仍是后代选择器，破坏 BEM 隔离性
&__price 或 &--highlighted，确保输出纯类名grep -r "\.[a-z]\+ \.[a-z]" dist/ 快速揪出残留空格选择器为什么修饰符叠加（button--primary--large--disabled）让重构成本指数级上升
写 button--primary--large--disabled 看似一气呵成，但它把三个独立状态耦合成一个不可拆分的字符串。换设计稿要新增 --xlarge，就得补一堆新类；主题系统想按状态接管，发现无法单独覆盖 --large；CI 检查也拦不住，直到某天 QA 发现“大号禁用按钮在暗黑模式下没生效”，你得翻 17 个文件找哪个地方漏写了 button--primary--large--disabled--dark。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 正确组合方式：
button--primary button--large button--disabled，每个修饰符独立、可复用、可覆盖 - CI 必须用
stylelint-selector-bem-pattern拦截双连字符连用，规则示例："componentName": "^(?!.*--.*--)" - 禁止含值修饰符：
button--w-200px❌，应改为语义化状态：button--size-large✅
为什么 BEM 在 SSR 和微前端里不是“可选”，而是硬性前提
Java/PHP 模板直出 HTML、或微前端子应用共用一份 CSS 文件时，没有 JS 运行时拼类、没有 CSS-in-JS 哈希。此时 user-profile__avatar--xs 就是唯一契约——后端工程师能看懂，审计能追溯到 /components/user-profile/，浏览器解析也不依赖任何构建工具。
- search-form__input 和 checkout-form__input 即使共用同一份 CSS 文件，也不会互相覆盖
- 禁止跨 block 复用：
.button--small和.input--small必须各自定义，哪怕样式完全相同；@extend或公共%placeholder会悄悄破坏 BEM 语义边界 - HTML 中每个元素只允许一个 BEM class：
<button class="button button--primary"></button>合规，<button class="button button--primary text-center"></button>违规（text-center是工具类，混入即模糊业务边界）
button--primary 和 button--outline 谁赢，取决于 CSS 引入顺序，不是命名能控制的。重构时若不统一 CSS 文件引入顺序，再规范的类名也救不了第 372 行和第 1894 行的战争。
