BEM 通过 block__element--modifier 命名契约解决 CSS 作用域隐式绑定问题，强制类名显式声明上下文，避免 DOM 结构变动导致样式失效、多人协作冲突及调试错位。
为什么 .header .nav li a 这种写法会让样式随 HTML 结构一起崩
它的作用域完全靠 DOM 层级隐式绑定，不是靠类名显式声明。只要改个父容器类名、加个中间包裹层、甚至只是把 li 换成 div，整个选择器就失效或误命中。
多人协作时更危险：A 改了 .header 的 padding，B 写的 .header .nav 突然多出 12px margin——没人知道谁在影响谁。
- 浏览器匹配是自右向左：先找
a:hover，再逐层验证父级；人脑理解却是从左到右，这种错位让调试成本指数上升 - 嵌套越深，耦合点越多：
.page .content .list .item这类四层选择器，改一次要查三处 DevTools - 一旦有人偷偷加一条
.sidebar .title，它可能意外命中.card__title（如果 DOM 恰好嵌套），上线后才暴露
BEM 类名必须守住的三条线
BEM 不是拼下划线游戏，而是靠命名契约堵住高频漏洞。写错一个分隔符，就等于放弃解耦。
-
block__element中必须是双下划线，button-icon--large是错的——button-icon会被当成新 Block，失去上下文 -
element只能属于且仅属于一个block：.modal__close不能同时被dialog和notification复用 -
modifier必须是布尔态或有限枚举：product-card--on-sale合规，product-card--width-240px不合规——后者该抽成独立element或用 CSS 自定义属性
怎么把旧项目里散落的 .input、.error、.label 改成 BEM 结构
不是简单全局替换类名，而是按组件边界重新归属。原来全站共用的 .input，实际属于不同上下文：登录表单、商品筛选、后台编辑页——它们视觉相似，但语义和行为不同。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 锁定高频冲突模块（如
form-item），把相关类全部收归其下：<input class="form-item__input">、<label class="form-item__label"> - 状态类不另起新 class：
.input-error→form-item__input--error（修饰符挂载在 element 上） - CSS 里删掉所有孤立的
.input规则，只保留.form-item__input及其修饰符 - HTML 中每个块级容器必须带 block 类：
<div class="form-item">，否则 BEM 失去锚点
第三方组件（如 ant-card）要不要强行套 BEM
不要。你没法改 ant-btn 的类名，硬套 ant-card__body 既违反 BEM 原则，又埋下覆盖隐患。
- 用 wrapper class 隔离：
<div class="product-card"><div class="ant-card"></div></div> - 只对
.product-card写 BEM 规则，用:where()或 CSS Modules 控制权重，避免用!important - 禁用全局重置，改用
all: unset在 block 范围内清空，再逐个声明需要的样式
真正麻烦的不是 class 多不多，而是每个 class 是否只表达一件事——比如 button--size-large 只控制尺寸，button--theme-dark 只控制配色，混在一起就失控。
