双短横线--专用于修饰符，是bem中标识状态/变体的语法信号，非装饰；单短横线-仅拼单词，混用会导致语义混乱、工具解析失败、样式无法命中。
双短横线--专用于修饰符，不是“加个横线更美观”
双短横线--在BEM里是语法信号，不是装饰。它告诉开发者、工具链（如Stylelint、PostCSS插件、VS Code BEM Helper）以及后续维护者：“这个类名描述的是当前块或元素的某种状态/变体”，比如尺寸、主题、加载态。一旦写成单短横线-或下划线_，整个语义就崩了——工具会把它当新块名处理，样式无法命中，CI也可能报错。
-
button--primary✅ 表示 button 块的 primary 变体；button-primary❌ 被识别为全新块，和button无任何关系 -
menu__item--disabled✅ 元素级修饰符，合法且明确；menu__item-disabled❌ 工具无法解析为“menu__item 的 disabled 状态”，而是当成一个孤立类 - 修饰符不支持嵌套：
button--primary--loading是非法写法，BEM只允许单层--，多状态需并列写两个类：button--primary button--loading
为什么不能用单短横线-代替双短横线--？
因为单短横线-在BEM中唯一用途是拼接单词，比如user-profile、submit-button。它没有语义分隔能力。如果混用，比如写card-header，你根本分不清这是块名（card-header），还是 card 块下的 header 元素（应为card__header），或是 card 的 header 变体（应为card--header）。这种歧义直接导致团队协作时样式不可预测。
- 构建工具（如postcss-bem）靠
--精准提取修饰符生成作用域变量，-会被忽略或误判 - React组件中若用
className={clsx('button', `button--${variant}`)}，写成`button-${variant}`会导致动态类名完全脱离BEM结构，后续无法被CSS Modules或Tailwind插件识别 - 搜索代码时，搜
--disabled能准确定位所有禁用态，搜-disabled会捞出一堆无关的块名和文件路径
--必须紧贴前一部分，中间不能有空格或其它符号
这是硬性解析规则。BEM工具链（包括Stylelint的bem/valid-selector）会按正则(?:^|[^a-zA-Z0-9])b(--[a-z0-9]+)+(?![a-zA-Z0-9])匹配修饰符，任何空格、下划线、驼峰都会中断匹配。
- ✅
form--success、input__label--required - ❌
form --success（空格）、form__label_required（下划线）、form__labelRequired（驼峰） - 特别注意：Sass中使用
&--hover时，&必须紧挨--，写成& --hover会编译出错误选择器
--不是可选项，是机器可读的契约。写错一个横线，可能让样式失效、工具失灵、协作卡壳——而这类问题往往在合并PR后才暴露，排查成本远高于写对时多敲的那一个键。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
