BEM通过block__element--modifier三段式命名显式声明组件归属、结构和状态，使新人无需猜测即可定位作用域与意图；块名须语义唯一（如form-field），元素名禁止结构描述（禁用form-field__div-2），修饰符必须表达可触发业务状态（如--loading而非--small），且所有样式须按块隔离存放并配工具链校验。
因为BEM把组件归属、结构和状态直接编码进类名，新人打开文件就能定位作用域与意图，不用翻HTML、不靠猜、不问人。
看到 form-field__input--disabled 就知道它属于哪个模块、是什么元素、处于什么状态
传统命名如 input-disabled 或 disabled-input 无法回答“这个禁用态是给谁用的”——是表单字段？搜索框？还是弹窗里的输入框？BEM强制在类名里带出上下文：form-field 是块名（独立功能单元），__input 是其内部元素（不可单独存在），--disabled 是明确可触发的状态（由 JS 控制或 props 驱动）。
- 块名必须语义唯一，
form-field比field或input-wrap更易识别边界 - 元素名禁止描述结构，
form-field__label合理，form-field__div-2是灾难——换标签就全崩 - 修饰符不能是视觉描述，
--blue不合法，--error或--compact才符合状态/变体定义
user-card.css 文件里只允许出现 user-card、user-card__avatar、user-card--loading 这类类名
老项目常把按钮样式分散在 base.css、ui-kit.css、profile-page.css 里，新人最怕“这个按钮样式到底在哪改？”——BEM规定：所有 button 相关样式只能出现在 button.css 中，且只允许出现 button、button__icon、button--primary 这类类名。
- IDE 搜索文件名即得完整作用域，
ctrl+click跳转即见全部样式逻辑 - 删组件时删文件即可，不会漏掉幽灵样式
- 文件开头加注释说明用途和可用修饰符，例如：
/*<br>* @block user-card<br>* @description 用户资料卡片,支持头像尺寸/信息折叠/操作按钮显隐<br>* @modifiers: --compact, --with-actions, --loading<br>*/
user-card__avatar--small 是错的，user-card__avatar--loading 才对
新人最容易写的错是 user-card__avatar--small——--small 是尺寸，不是状态，它没回答“什么时候该小”。BEM要求修饰符必须关联可触发的行为或业务状态：user-card--compact（用户设置触发）、user-card__avatar--loading（JS 控制切换）。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 这样写 JS 时，
el.classList.toggle('user-card__avatar--loading')的意图一目了然 - 禁止用修饰符表达位置关系，
nav__item--in-sidebar违反原则，应拆出新块sidebar-nav - 修饰符可叠加但需团队共识，
button--primary--loading是否合法、有无副作用，必须写进设计文档或 Code Review 清单
人工拼 my-button__icon--loading 错误率高，推荐用 useName
漏下划线、大小写混、多写一个横线——手写 BEM 类名极易出错。工具链必须介入拦截：
- 用
stylelint-selector-bem-pattern插件，配置{"componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem"}，自动拦截.header .logo或btn-primary - VS Code 安装 “BEM Helper”，输入
user-card回车自动补全user-card__和user-card-- - CI 流程中跑
npx stylelint "**/*.{css,scss}"，失败即阻断合并
真正难的不是学会规则，而是每次加新状态都坚持去对应 block 文件里补 modifier，而不是塞进临时 CSS 片段里——那个动作本身就在训练模块边界意识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
