必须用btn--primary而非btn-primary，因BEM规范强制修饰符用双短横--分隔，确保构建工具识别、样式继承有效、团队协作无歧义，且语义表达行为而非视觉快照。
直接用 btn--primary 和 btn--secondary，别写 btn-primary 或 btn-secondary —— 后者不是 BEM 修饰符，是普通类名，语义断裂、协作易错、构建工具可能误删。
为什么必须带双短横 -- 而不是单短横或下划线
BEM 规范强制要求修饰符用 -- 分隔，这是语法契约，不是风格偏好。浏览器不校验，但构建工具（如 PostCSS BEM 插件）、DevTools 的样式面板、团队代码审查都会依赖这个约定来识别状态类。
-
btn--primary被识别为 “btn块的primary修饰符”，CSS 里可统一用.btn--primary控制，JS 里用el.classList.toggle('btn--primary')安全切换 -
btn-primary被当成一个全新块名，和btn无归属关系；它无法被.btn基础样式继承，也不能被预处理器@extend .btn复用逻辑 -
btn_primary下划线在 BEM 中无定义，多数 lint 工具（如 stylelint-selector-bem-pattern）会报错，且和 CSS 自定义属性（如--color-primary）视觉混淆
btn--primary 和 btn--secondary 怎么写才不耦合颜色
修饰符名表达的是行为语义，不是视觉快照。写 btn--primary 是说“这是用户最该点的那个按钮”，不是“它得是蓝色”。一旦主题换色，所有 btn--primary 自动走新配色；如果硬编码颜色，就得全局搜 #007bff 改。
- CSS 中只定义一次：
.btn--primary { background-color: var(--color-primary); } - 禁止在 HTML 里靠 class 名猜颜色，比如
btn--blue或btn--red—— 这等于把视觉耦合进结构 - 如果某页需要“红色的主要按钮”，加
btn--primary btn--urgent组合，而不是新建btn--red-primary - 所有颜色变量集中管理：
:root { --color-primary: #007bff; --color-secondary: #6c757d; }
多个修饰符共存时 class 顺序有没有影响
不影响最终样式生效，因为 CSS 优先级看选择器权重和声明顺序，不是 HTML 中 class 出现顺序。但顺序影响人眼可读性和后期维护成本。
- 推荐固定顺序：
btn btn--primary btn--sm btn--disabled（基础 → 语义 → 尺寸 → 状态） - 避免
btn--sm btn btn--primary这种穿插写法，加新修饰符时容易错位漏空格 - JS 添加类必须用
classList.add('btn--primary')，别字符串拼接：el.className += ' btn--primary'容易重复或覆盖其他类 - 组合状态需显式声明 CSS，比如
.btn--primary.btn--disabled { opacity: 0.4; }—— 不会自动继承或叠加
怎么防止 btn--secondary 被误当成 btn 的子元素
关键在命名结构是否清晰绑定到 block。只要遵守 block--modifier 格式，就不会被误读为 element。
- ✅ 正确：
btn--secondary（btn块的secondary修饰符） - ❌ 错误：
btn__secondary（这会被当成btn块下的secondary子元素，语义错位） - ❌ 更错：
btn-secondary（没--，BEM 工具无法识别为修饰符，协作时别人可能以为它是独立组件） - 验证方式：打开 DevTools，选中按钮，看 Styles 面板里是否能快速定位到
.btn--secondary规则 —— 如果找不到或匹配不到，大概率是命名违规
真正难的不是写对 --，而是团队所有人坚持用同一套语义词：比如 btn--submit 和 btn--primary 到底什么关系？要不要合并？这类决策比语法本身更消耗共识成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
