修饰符必须用--语法且仅表达状态或变体，禁用--red等视觉值命名，因其破坏语义隔离与主题可替换性；--active是bem固有变体，is-active是js运行时状态类，二者不可混用。
修饰符必须用 -- 语法，且只能表达状态或变体，不能写视觉值（如 --red）或上下文（如 --in-modal）。
为什么修饰符不能叫 --red 或 --small
这类命名把样式细节硬编码进类名，直接破坏语义隔离和主题可替换能力。比如换暗色模式时，--red 可能要改成 --error，但所有 HTML 和 JS 都得同步改；而 --error 在任何主题下都指向“错误态”，CSS 变量或颜色 Token 一换就全局生效。
-
--red是视觉描述，不是状态——它无法被 JS 安全读取或响应（el.classList.contains('btn--red')没业务含义） -
--small模糊：是尺寸？密度？还是紧凑布局？应明确为--compact或--dense - 设计系统里已有
color-errorToken，类名却用--red，会导致维护脱节
--active 和 is-active 什么时候用哪个
二者用途完全不同：--active 是 BEM 修饰符，用于声明“这个块/元素当前处于活跃变体”；is-active 是运行时状态类，只由 JS 添加/移除，CSS 仅定义其效果。
- 用
--active：组件自身有“活跃态”这一固有变体，比如导航项默认可点击，.nav__item--active表示“这是当前选中项” - 用
is-active：需要 JS 动态控制、且可能受 SSR 或初始 HTML 影响的状态，比如侧边栏开关——.is-sidebar-open .sidebar才能确保 JS 加载失败时回退安全 - 禁止混用：不要写
.btn--primary.is-active，这既违反 BEM 平级修饰原则，又让状态逻辑分散
修饰符可以叠加，但不能嵌套或带层级
BEM 修饰符之间是平级布尔开关关系，不是父子或条件组合。例如按钮同时支持主题、尺寸和加载态，应写成 btn--primary btn--large btn--loading，而不是 btn--primary-large-loading。
- 叠加有效：多个
--类可共存，浏览器渲染无负担，CSS 选择器权重也一致 - 顺序无关：
btn--loading btn--primary和btn--primary btn--loading效果相同 - 禁用嵌套式命名：
btn--primary--loading违反 BEM 规范，会被解析为“primary 的 loading 变体”，语义断裂 - 避免上下文绑定：
btn--in-header把布局位置写进类名，导致该按钮无法复用于 footer 或弹窗
如何判断一个修饰符该加在 Block 还是 Element 上
看状态影响范围：如果变化只作用于某个子部分（如某颗星星高亮），修饰符加在 Element 上；如果影响整个组件行为或布局（如整组评分不可编辑），修饰符加在 Block 上。
- 正确：
.rating__star--hovered（单星悬停）、.rating--readonly（整组禁用） - 错误：
.rating__star--readonly（单颗星谈不上“只读”，这是 Block 级约束） - 更错：
.rating--star-hovered（Block 不该为 Element 的状态命名，语义越界） - Element 修饰符不能脱离 Block 存在——
.btn__icon--spin合法，但单独用.icon--spin就破坏 BEM 结构
最易被忽略的点：修饰符不是“多写几个类名就完事”，它本质是组件 API 的 CSS 映射。你写的每个 --xxx，都应该能在组件 props 或 state 里找到对应字段，否则就是命名漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
