语义化标签页tab组件应使用行为含义类名（如--caution）而非视觉色值类名（如--warning），颜色由css自定义属性控制，修饰符须绑定到具体bem元素，激活态与语义色彩正交处理，暗色模式通过媒体查询更新变量值实现。
标签页Tab组件的语义色彩不该用 color-red 这类命名
直接写 tabs__item--red 或 tabs__item--warning 看似省事，但会把视觉实现和业务意图绑死。一旦设计规范把“警告”从橙色改成琥珀色，所有 HTML、CSS、JS 里含 --warning 的地方都得人工排查——而它本该只表达「需用户注意但可跳过」这个行为含义。
正确做法是统一用语义化修饰符：tabs__item--caution、tabs__item--critical、tabs__item--success。这些类名不承诺颜色，只声明严重性层级。颜色由 CSS 自定义属性控制：
:root {
--tabs-caution-color: #fb8c00;
--tabs-critical-color: #d32f2f;
}
.tabs__item--caution { color: var(--tabs-caution-color); }
.tabs__item--critical { color: var(--tabs-critical-color); }
修饰符必须绑定到 tabs__item 上，不能单独存在
tabs__item--caution 是合法的；tabs--caution 或 --caution 都不行——前者作用于整个标签页容器，后者完全丢失上下文，无法定位样式归属。
- 每个修饰符必须明确依附于一个块（
tabs）或元素（tabs__item） - 禁止跨块复用修饰符名：不能让
notification--caution和tabs__item--caution共享同一套颜色变量，除非它们在业务逻辑中确实代表同一语义层级 - 如果某组标签页需要「仅文字变色，背景不变」，就新增
tabs__item--caution-text-only，而不是改写原有修饰符的样式规则
激活态与语义色彩要正交处理
tabs__item--active 和 tabs__item--caution 是两个独立维度：一个是交互状态，一个是内容级别。它们可以共存，比如一个「已激活的警告型标签」应写成：
<button class="tabs__item tabs__item--active tabs__item--caution">系统告警</button>
常见错误是把两者合并：tabs__item--active-caution。这会导致：
- 无法单独关闭「激活」或「警告」样式
- JS 判断逻辑变复杂：
el.classList.contains('tabs__item--active-caution')不如el.classList.contains('tabs__item--active') && el.classList.contains('tabs__item--caution')清晰 - 当「警告」标签被点击后，你得手动删掉
--active-caution再加--active，而不是简单切换一个类
暗色模式下语义色彩怎么不重写类名
不要为暗色模式新增 tabs__item--caution-dark。正确路径是保留原修饰符，靠 CSS 变量响应主题：
@media (prefers-color-scheme: dark) {
:root {
--tabs-caution-color: #ffa726;
}
}
.tabs__item--caution { color: var(--tabs-caution-color); }
关键点在于：
- 变量值可被 JS 动态覆盖（比如用户手动切换主题）
- 无障碍对比度检查工具能基于
var(--tabs-caution-color)计算实际渲染值，而不是被类名误导 - 如果你发现深色下
--tabs-caution-color对比度不足，只需改变量，不用动任何 HTML 或 BEM 类结构
最容易被忽略的是：语义色彩修饰符本身不承担「是否可见」「是否禁用」等职责，那些该交给 is-disabled 或 tabs__item--hidden 这类状态类来管。混淆这两类，会让样式层和交互层耦合过紧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
