布尔修饰符仅用于“有/无”二元状态，必须存在即生效，不带值、不表达程度或类型，只回答“是不是”；如--disabled、--checked、--loading，禁止与data属性或业务逻辑耦合，须严格绑定DOM状态与可访问性属性。
布尔修饰符只能用于“有/无”状态，且必须存在即生效
布尔修饰符如 --disabled、--checked、--loading 不带值，CSS 中靠类名是否存在来触发样式。它不表达程度或类型，只回答“是不是”这个问题。
常见错误现象：.button--size-large 被当成布尔修饰符写，但 size 显然是多态配置，不是非此即彼的状态；又或者写 .switch--on，结果和业务开关语义耦合，导致 SSR 首屏无法同步、键盘空格切换失效。
-
--checked必须与绑定，同步input.checked和aria-checked - 禁止用
data-属性模拟布尔状态，如data-state="checked"，构建工具可能误删 - 布尔修饰符不能组合出新含义，比如
.button--disabled--loading是允许的（正交），但.button--disabled--primary就容易引发颜色与禁用态的样式冲突
键值修饰符必须带语义化值，且值应可枚举、可扩展
键值修饰符格式为 --theme-dark、--size-large、--radius-sm，中间用双连字符，值用短横线连接的单词，不能是数字或技术单位（如 --radius-4px 或 --flex-1）。
使用场景：当某个特征未来可能增加变体时，必须一步到位设计为键值型。比如圆角，一开始只用 --rounded，后面加 --rounded-full 就破坏了命名体系。
- 尺寸类优先用语义词：
--size-small而非--small，避免和--disabled等布尔类混淆层级 - 主题类统一走
--theme-前缀，如--theme-dark、--theme-high-contrast，便于 CSS 变量承接 - 禁止把响应式断点塞进修饰符，如
--mobile或--sm—— 断点逻辑交给@media，修饰符只表达意图状态（如--layout-stack）
修饰符必须绑定到具体块或元素，不可脱离上下文独立存在
BEM 的修饰符不是全局开关，它必须依附于一个明确的块（.card--disabled）或元素（.card__header--hidden）。直接写 .disabled 或泛化为 .button--disabled 却不区分是按钮本身、图标还是文字被禁用，会导致语义断裂。
容易踩的坑：在轮播组件里写 .carousel--vertical，但垂直滑动涉及 swipeY、指示器排布、分页逻辑全量变化，已超出单个修饰符能承载的范围——该新建 carousel-vertical 块。
- 正确写法：
.carousel__indicator--active（指示器激活）、.carousel__track--swiping（轨道正在滑动） - 错误写法：
.carousel--active（谁 active？整个轮播？还是某张图？语义模糊） - 多个修饰符共存时，保持逻辑正交：
.gallery__thumb--square--loading合理，但.gallery__thumb--square--wide冲突，不应同时出现
修饰符不控制 DOM 结构，也不替代 JS 状态管理
所有修饰符只负责样式层反馈，不能用来隐藏/显示内容、插入标签或接管交互逻辑。比如 --hidden 应配合 JS 切换类，而不是单纯写 .element--hidden { display: none } 就完事。
更关键的是：修饰符不改变组件结构职责。如果某个“变体”需要额外 HTML 标签（如加载中加 spinner 元素）、新属性（如 inert）、或不同事件绑定方式，说明它已经超出了修饰符范畴，该考虑封装新块或升级为独立组件。
-
--placeholder和--loading必须由 JS 控制增删，且需配合过渡动画与 pointer-events 锁定 - 禁用态（
--disabled）必须声明pointer-events: none和cursor: not-allowed，但颜色应由 CSS 变量控制，如background-color: var(--button-bg-disabled) - 不要在 CSS 里用
.button--disabled:hover做悬停反馈——禁用后 hover 本不该触发，若需视觉提示，应在 JS 层拦截并提前取消
实际项目里最常忽略的一点：修饰符的生命周期必须和 JS 状态严格对齐。类名加了但 input.checked 没同步，或 aria-checked 漏掉，对屏幕阅读器用户就是不可用的。BEM 提供的是命名契约，不是自动同步机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
