禁用状态必须用--disabled，不能写成-btn-disabled或-btn_disabled；bem修饰符唯一合法分隔符是双连字符--，否则会被视为独立类名，导致构建误删、devtools无法识别语义、协作混乱。
禁用状态必须用 --disabled，不能写成 -disabled 或 _disabled
BEM 修饰符的唯一合法分隔符是双连字符 --。写成 .btn-disabled 或 .btn_disabled，CSS 就不认为它是修饰符，而是一个独立类名——构建工具可能误删，DevTools 里看不到它和 .btn 的语义关联，协作时别人会当成新组件去改。
常见错误包括：.btn-primary-disabled（耦合命名，破坏正交性）、.btn--primary--disabled（嵌套修饰符，BEM 明确禁止）。正确写法只有 .btn--disabled、.nav__link--disabled 这一类。
-
--disabled必须绑定可验证的 UI 表现：显式设置pointer-events: none、cursor: not-allowed、opacity或颜色灰阶，不能只靠背景色变浅 - JS 控制时用
element.classList.toggle('btn--disabled', isDisabled)，避免字符串拼接漏空格或覆盖其他类 - 禁用态样式规则权重必须高于基础类和功能修饰符（如
.btn--primary），否则可能不生效
--active 和 --disabled 可以共存，但 CSS 必须显式处理组合效果
BEM 允许多修饰符同时存在，比如 class="tab__item tab__item--active tab__item--disabled"，但浏览器不会自动合并规则。如果 .tab__item--active 设了 background: blue，.tab__item--disabled 写了 background: #ccc，最终颜色取决于层叠顺序，而不是 class 出现顺序。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 高频动态状态（如
--loading）建议在 CSS 文件中靠后声明，避免被静态状态覆盖 - 需要叠加效果时，必须单独写组合选择器：
.tab__item--active.tab__item--disabled { opacity: 0.5; } - 禁止写
.tab__item--active-disabled—— 这不是 BEM 合法语法，也不利于 JS 动态控制 - 伪类（如
:hover）不应替代修饰符；--active是可编程状态，需由 JS 显式添加/移除
激活态该用 --active 还是 --is-active？
BEM 官方推荐用 --active，而非 --is-active。前者是标准修饰符命名，后者属于布尔型变体，容易和 JS 中的 classList.toggle('is-active') 混淆，增加维护成本。
-
--active应对应明确视觉反馈：高亮边框、z-index 提升、文字加粗等，不能只改颜色 - 对于模态框这类布尔状态，
.modal--is-open可接受，但按钮、Tab 项等交互元素更倾向阶段词：--idle、--submitting、--success - 禁止通配匹配：
[class*="is-"]会命中第三方组件里的is-expanded等类，造成意外样式污染
状态类必须和块主样式写在一起，别拆到单独文件
把 .btn--disabled 或 .tab__item--active 的样式抽到 btn.states.css 这类文件里，会导致定位困难、审查成本上升。BEM 状态样式就该和块的主样式写在同一文件中，方便一眼看出“这个块支持哪些状态、每种状态表现什么”。
- 所有断点相关的状态（如
.nav__link--mobile-active）也应和主样式同文件，@media规则统一放在末尾 - 状态修饰符名必须是人一眼看懂它干了什么的词，不是后台响应码映射：
--network-error错，--error对；--pending模糊，--loading明确 - 状态变化必须由 JS 显式控制，不要依赖 DOM 层级或父子选择器（如
.tab__item .tab__panel）来联动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
