bem规范中必须用--作修饰符前缀，因其是工具链识别状态语义的唯一合法标识；btn--primary等需独立声明css、用classlist.toggle切换，禁止连写或视觉命名，且修饰符须为有限枚举并正交共存。
为什么必须用 -- 而不是 - 或 _
BEM 规范里，-- 是修饰符（Modifier）唯一的合法前缀，不是为了“好看”，而是为了让工具链能准确识别状态语义。比如 btn--primary 会被 PurgeCSS 当作 btn--* 模式保留，而 btn-primary 可能被当成独立组件误删；VS Code 插件或 TypeScript 类型推导也依赖这个固定模式提取状态枚举。写成 btn_primary 更糟——下划线在多数构建工具中默认不参与类名解析，等于主动放弃自动化支持。
btn--disabled 这类修饰符该怎么声明和使用
直接在 CSS 中独立声明，不嵌套、不依赖结构：
.btn { /* 基础样式 */ }
.btn--disabled {
opacity: 0.5;
pointer-events: none;
}
- JS 切换必须用
element.classList.toggle('btn--disabled', isDisabled)，别拼字符串赋值给className，否则容易覆盖其他类 - 多个修饰符共存时（如
btn--primary btn--disabled），CSS 规则要正交：一个管背景色，一个管交互态，避免互相覆盖 - 禁止连写：
btn--primary--disabled是非法的，它不再是修饰符，而是新块名，破坏 BEM 可预测性
哪些场景下不能用 -- 修饰符替代其他方案
-- 只适用于描述组件自身的状态或变体，不是万能开关：
- 不要用
btn--bg-red这种视觉导向命名，该用btn--danger表达意图 - 属性选择器如
[disabled]或伪类:hover不能替代btn--hover，因为它们不显式暴露状态，JS 难控制、DevTools 难调试、PurgeCSS 难识别 - 响应式变化（如宽度随断点切换）不该塞进修饰符，应配合媒体查询 + 自定义属性，例如
btn--large { --btn-width: 200px; }
多人协作时最容易漏掉的 -- 使用细节
修饰符必须与 Block 或 Element 并列存在，不能挂在元素上乱加层级：
- ❌ 错误：
card__header--sticky—— 元素（__header）不能直接带修饰符 - ✅ 正确：
card__header card__header--sticky，且 CSS 中需单独声明.card__header--sticky - 所有修饰符值必须是有限枚举（
primary/secondary/loading），禁用btn--width-200px这类具体值命名 - HTML 中动态类名必须用
clsx或类似工具生成，避免空格遗漏或布尔值转字符串出错
真正难的不是写对 --，而是让所有人坚持只用它表达状态，不把它当样式快捷方式滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
