bem落地靠块名源头唯一、分隔符强制隔离、修饰符语义化三条铁律；块名须根节点派生且唯一，元素名去父级语义，修饰符需可枚举、不涉视觉细节，禁止多层嵌套与后代选择器。
直接上结论：BEM不是靠“设计命名系统”实现的，而是靠块名源头唯一 + 分隔符强制隔离 + 修饰符语义化这三条铁律落地的。写错一个__或--，整个组件就可能被全局样式穿透。
块名必须从组件根节点派生，不能拼接或缩写
常见错误是把user-card拆成card和user再组合，结果生成user__card__title——这违反BEM基本规则，user和card本该是两个独立block。正确做法是每个组件只定义一个BLOCK常量：
-
const BLOCK = 'user-profile'→ 所有类名必须以user-profile开头 - 禁止出现
user-profile__avatar__image，子图如果需复用，应抽为独立avatar块 - 块名中不用动词（如
toggle-menu），而用名词（menu-toggle），避免状态耦合
元素名不带父级语义，修饰符不描述视觉细节
card__header-title是典型冗余：title本身就是header的语义子集，card__title已足够。修饰符更不能写button--red这种颜色直译，因为主题切换时会失效。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 元素名只表达功能角色：
search-form__input✅，search-form__search-input❌ - 修饰符值必须可预测、可枚举：
button--primary✅，button--v2❌ - 状态类优先挂根块：
form--submitting控制整体禁用，而非分散到每个form__input--disabled
SCSS里只允许单层嵌套，禁止生成后代选择器
写.card { &__header { &__title { ... } } }会编译出.card__header .card__header__title，破坏BEM的平级隔离原则，导致修改.card__header的display意外影响子元素定位。
- 合法写法：
.card { &__header {} &__title {} &--expanded {} } - 遇到“元素里的元素”，先判断是否真属同一逻辑块；如果不是，就拆新
block（比如badge） - 需要样式继承时，用CSS自定义属性代替链式选择器：
card__title读var(--title-color)，由card块统一注入
BEM最难的部分不是语法，而是每次加新类名时，都要问一句：“这个类是否能脱离当前HTML结构单独存在？”——答案为否，就得重构。否则命名系统越“完整”，越容易在协作中崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
