布尔型Modifier必须用语义化单词（如btn--disabled），不能用true/false、on/off或is-/has-前缀，因其表达的是组件可预期的状态意图，而非JS变量值或实现细节。
布尔型Modifier必须用语义化单词，不能用true/false或on/off
写 btn--is-disabled 或 card--has-header 是错的——BEM不接受布尔值字面量作为Modifier名。它要表达的是“状态意图”，不是“JS变量值”。btn--disabled 正确，因为 disabled 是组件的一种可预期、可设计的状态；而 btn--is-disabled 把实现细节（JS判断逻辑）泄漏到CSS层，导致样式类名和业务逻辑强耦合。
常见错误现象：Uncaught TypeError: Cannot read property 'classList' of null 往往源于JS里写了 el.classList.toggle('btn--is-disabled')，但CSS里只定义了 .btn--disabled，选择器对不上。
- ✅ 推荐：
modal--open、tab--active、input--readonly - ❌ 避免：
modal--is-open、tab--is-active、input--is-readonly - ⚠️ 注意：HTML中也不该写
class="btn btn--is-disabled"—— 类名本身就得是最终状态标识，不是条件表达式结果
布尔Modifier不能带值，也不该用属性选择器模拟
BEM的Modifier是“开关型”存在，没有中间态，所以不接受带值写法，比如 btn--state="disabled" 或 btn--variant="disabled"。这类写法混淆了BEM与自定义属性的职责边界，也破坏了类名的原子性。
使用场景上，布尔Modifier专用于二元状态：开/关、有/无、启用/禁用、可见/隐藏。它不是用来传递数据的，更不是替代 data- 属性的手段。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- ✅ 正确：
<button class="btn btn--disabled">提交</button>+.btn--disabled { opacity: 0.5; pointer-events: none; } - ❌ 错误：
<button class="btn" data-state="disabled">提交</button>+.btn[data-state="disabled"] { ... } - ❌ 更错：
<button class="btn btn--state-disabled">提交</button>（把Modifier当命名空间前缀用）
多个布尔Modifier必须并列书写，禁止组合或缩写
一个元素同时处于多种布尔状态时，每个Modifier都应独立存在。这不是为了“语义清晰”这种虚话，而是为了支持CSS-in-JS、classnames库、React条件拼接等真实工程场景下的可预测性。
性能上没差异，但维护成本天差地别：连缀类如 btn--disabled--loading 一旦要加第三种状态（比如 --pending），就得硬编码新类名；而并列写法 btn btn--disabled btn--loading 可直接用数组过滤或对象键值控制。
- ✅ 正确：
btn btn--disabled btn--loading btn--compact - ❌ 错误：
btn--disabled-loading、btn--disabled-loading-compact - ⚠️ 容易踩的坑：Sass里用
@each生成.btn--#{$state}，再手动拼出连缀类——这等于放弃BEM的组合契约
布尔Modifier不能用于响应式断点或浏览器特性检测
nav--mobile、table--ie11 这类写法看似方便，实则混淆了“组件固有状态”和“环境适配逻辑”。BEM Modifier描述的是组件自身能决定的状态，不是视口宽度或UA字符串推导出的外部条件。
响应式行为应由媒体查询驱动已有类名，比如：@media (max-width: 768px) { .nav--horizontal { flex-direction: column; } }。强行把断点塞进类名，会导致CSS体积膨胀、缓存失效、调试困难。
- ✅ 正确：用
nav nav--horizontal+ 媒体查询控制其布局方向 - ❌ 错误：
nav nav--mobile并在JS里监听 resize 切换类名 - ⚠️ 复杂点在于：团队常把“移动端专属样式”当成组件状态，其实它只是同一组件在不同容器中的表现——Modifier不该承担这个责任
