布尔型修饰符表达“有或无”，键值型修饰符表达“是哪一个”；布尔型不带值、仅靠存在生效，适用于开关状态；键值型必须带语义化单词值，用于多态变体；选错类型会导致扩展困难、命名断裂或被PurgeCSS误删。
布尔型 Modifier 表达“有或无”，键值型 Modifier 表达“是哪一个”——选错类型会导致后续扩展困难、命名断裂，甚至被 PurgeCSS 误删。
布尔型 Modifier：只靠存在与否生效
它不带值，仅表示开关类状态，比如是否禁用、是否加载中、是否展开。CSS 中直接检测 class 是否存在即可，不需要写 button--disabled="true" 这种伪属性。
-
button--disabled正确：样式规则写成.button--disabled { pointer-events: none; opacity: 0.5; } -
button--is-disabled❌ 错误：BEM 不支持is-前缀，这不是官方修饰符语法，且易与 JS 状态类混淆 -
button--loading✅ 正确：语义是“当前处于 loading 状态”，不是“是不是 loading”，所以不用button--is-loading - 多个布尔修饰符可共存：
button--primary--disabled--loading合法，但需确保它们逻辑不冲突（比如--disabled和--loading通常互斥）
键值型 Modifier：必须带语义化值
它用于多态配置，比如主题、尺寸、圆角程度等可枚举的变体。值必须是连字符分隔的单词，不能是数字或技术单位。
-
card--theme-dark✅ 正确：值dark是语义化单词 -
card--size-large✅ 正确：值large表示一种明确的尺寸档位 -
button--rounded-full✅ 正确：比--rounded更具扩展性，后续可加--rounded-sm、--rounded-md -
button--radius-4px❌ 错误：含单位px，违反语义化原则；应改为button--radius-sm -
button--flex-1❌ 错误：“flex-1”是 CSS 技术术语，不是 UI 层面的语义描述
Modifier 必须绑定到 Block 或 Element 上
修饰符不能脱离主体单独存在，也不能跨层级使用。它的作用对象必须清晰可见。
立即学习“前端免费学习笔记（深入）”；
-
button--primary✅ 正确：修饰button这个 Block -
button__text--large✅ 正确：修饰button__text这个 Element -
button--primary__text❌ 错误：BEM 不允许修饰符和元素混合写法，--primary__text无意义 -
button__text--primary❌ 错误：把本该修饰 Block 的--primary错配到 Element 上，语义错位 - 一个
button可以同时有多个修饰符：button--primary--loading--compact，但每个都必须作用于button本身
最容易被忽略的是初始设计阶段对修饰符类型的预判——如果“圆角”未来可能细分程度，就别用 --rounded，直接定义为键值型 --radius-sm/--radius-lg；一旦按布尔型写了，后面加新值就会破坏命名一致性，也难做自动化提取或主题切换。
