modifier必须与block或element共存，不能单独使用；正确写法是class="button button--disabled"，错误写法是class="button--disabled"；禁止在modifier中使用!important，命名需限定于设计系统内可枚举的有限变体。
Modifier必须和Block或Element共存，不能单独使用
Modifier类名（如.button--disabled）本身不带语义完整性，它只是状态标记，不是独立样式单元。浏览器匹配时，.button--disabled权重确实是0-1-0，但若HTML里只写class="button--disabled"，这条规则根本不会生效——因为基础样式.button没加载，所有依赖它的属性（比如display、padding）都缺失。
- 正确写法：
class="button button--disabled" - 错误写法：
class="button--disabled"（样式断层，常表现为“看起来没变化”，实际是基础样式丢失） - 构建工具（如css-loader）若配置
localIdentName时截断了--，会导致.button--disabled变成.buttondisabled_abc，直接失效
禁止在Modifier里用!important
一旦在.button--disabled里加!important，就等于主动放弃BEM的平权机制。后续任何叠加状态（比如.button--disabled.button--loading）或主题覆盖（.theme-dark .button--disabled）都会被迫跟进!important，形成恶性循环。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Modifier表达的是“状态变更”，不是“兜底覆盖”——它该做的只是改
opacity、cursor这类单一属性 - 如果
.button--disabled没生效，优先检查：类名是否拼错、CSS文件是否引入、JS是否误删了.button基础类 - 第三方库冲突时（比如Ant Design的
.ant-btn），不要用!important硬盖，而是用BEM隔离：把按钮封装为独立my-button块，再定义my-button--disabled
伪类状态优先走Modifier切换，而非CSS里写:hover
.button--hovered权重是0-1-0，而.button:hover是0-1-1——看似只高1分，但在多人协作项目中，很容易和第三方库的.btn:focus（也是0-1-1）发生不可控覆盖。声明顺序稍一变动，hover效果就消失。
- 推荐做法：JS监听
mouseenter/mouseleave，动态增删.button--hovered - Sass中允许
&:hover，但仅限于生成.button--hovered等效类，而不是嵌套出.button:hover - 绝对禁止写
.button .button--hovered——空格即后代选择器，权重升到0-2-0，BEM防线直接破防
Modifier命名要限定变体范围，避免语义失控
Modifier不是状态快照容器。.button--is-loading这类命名看似合理，实则把运行时状态塞进了静态类名，既难维护又易冲突；而.button--primary表达的是设计系统中明确的“主按钮”变体，边界清晰。
- 接受的Modifier：
.button--primary、.button--small、.button--block（设计规范内可枚举的有限变体） - 拒绝的Modifier：
.button--is-disabled（应由JS控制.button--disabled开关）、.button--bg-blue（颜色应抽为CSS变量，而非硬编码类名） - 跨组件状态（如暗色模式）不该侵入Modifier，而应通过顶层类
.theme-dark配合data-theme属性做隔离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
