BEM规范通过block__element--modifier结构强制样式作用域隔离，避免类名冲突与样式覆盖；需配合工具链校验、业务语义块名、修饰符语义化及CSS引入顺序管控才能真正落地。
因为不统一 BEM 规范，团队协作时类名冲突、样式覆盖、DOM 变更失效会从偶发 bug 变成每日必修课。
类名冲突不是“可能”，而是“必然发生”
多人并行开发时，.header、.btn、.list 这类泛义名在不同模块里被重复定义是常态。微前端场景下，子应用各自引入 common.css，.card 覆盖 .card 不报错，但卡片圆角突然变直、文字溢出——你得花 40 分钟定位是哪个 card 里的 overflow: hidden 被删了。
- Block 名必须带业务语义前缀，比如
user-profile而非profile，避免和product-profile冲突 - 禁止用
global、base、layout这类泛义词当 block 名，它们注定会在第 3 个迭代时变成命名黑洞 - 工具链必须校验：PostCSS 插件
postcss-bem-linter或 Stylelint 的selector-bem-pattern规则要开到 error 级别
响应式逻辑散落导致改断点像考古
看到 is-mobile 类被加在 button、modal、form 上，就知道项目已经失控。这种全局开关类一出现，@media 规则就必然分散在十几个文件里，改一个 768px 断点得 grep -r "min-width" src/ 半小时。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 所有响应式变更必须绑定到具体 BEM 类，比如
product-grid--two-column或nav__item--stacked -
@media块内只允许一个 BEM 类选择器，禁止写.product-grid .product-card这种带空格的嵌套 - Sass 中
& .product-card__price是危险写法，它会编译出空格选择器，必须写成&__price
修饰符滥用让状态管理变成猜谜游戏
button--width-200px、card--top-16 这类含值修饰符，换设计稿就得批量新增类；user-card--active 和 user-card__avatar--active 混用，没人能说清哪个优先级更高。
立即学习“前端免费学习笔记（深入）”；
- Modifier 只描述稳定状态：
button--primary✅，button--w-200❌ - 元素级修饰符不能脱离块存在：
user-card__avatar--large合规，avatar--large违规 - BEM 不解决层叠顺序问题——
button--primary和button--outline谁赢，取决于 CSS 引入顺序，不是命名问题
BEM 本身不产生性能或可维护性，它只是把“谁该管什么”刻进类名里；真正卡死项目的，永远是修饰符叠加、状态类混用、CSS 文件引入顺序混乱这三件事——它们不会在 DevTools 里报错，但会让你在凌晨两点还在比对打包后的 dist/main.css 里第 372 行和第 1894 行谁覆盖了谁。
