命名颜色是140个固定rgb值的静态别名，无语义、不可控、无法参与计算，拼写错误静默失效，不支持主题切换、深色模式适配及css函数运算。
命名颜色（如 red、tomato、rebeccapurple）不是“过时了才不能用”，而是它们从设计上就不适配现代工程需求——它们是 140 个固定 RGB 值的静态别名，既无语义、也不可控、无法参与计算，写错一个字母就静默失效。
命名颜色本质是硬编码 RGB，不是变量
你写 color: tomato，浏览器立刻替换成 rgb(255, 99, 71)，之后和 tomato 这个词再无任何关系。它不绑定设计意图，不能被主题覆盖，也不能用 color-mix() 调整明暗。
- 无法用于 CSS 自定义属性运算：
--main: tomato之后，color: calc(var(--main) * 1.2)直接解析失败 - 要加透明度？
rgba(tomato, 0.8)是非法语法，必须先转成rgb(255, 99, 71)再套rgba() - 深色模式下
lightgray可能被系统强制映射为黑，而#d3d3d3始终稳定
拼写/大小写错误导致静默失效
浏览器只认 W3C 官方定义的 140 个全小写、无空格、无连字符的名称。像 light-gray、RebeccaPurple、midnightblue（少一个 e）这类写法，浏览器直接忽略该声明，元素回退为继承色或默认色，不报错也不提示。
- 查证方式：打开 Chrome DevTools，在 Styles 面板输入
color: xxx，如果值被划掉或没高亮，说明不识别 - 安全做法：只从 W3C 官方关键词表复制，粘贴后手动删掉所有空格和连字符
-
currentcolor是关键字，但不是命名色——它动态取当前color值，且必须全小写；currentColor（大写 C）完全无效
单边颜色属性里容易“有设置却无效果”
单独设 border-bottom-color: rebeccapurple，边框大概率看不见——因为 border-bottom-style 默认是 none，颜色再准也没用。
- 必须同时声明
border-bottom-style（如solid、dashed）和border-bottom-width（哪怕1px） - 更稳妥写法是直接用简写：
border-bottom: 2px solid rebeccapurple - 如果用了
border-color: black这类四边统一声明，再单独写border-bottom-color: rebeccapurple，得确保它在border-color之后，否则会被覆盖
系统颜色（如 ButtonFace、CanvasText）更不可控
这些不是“命名颜色”的子集，而是另一类由操作系统 + 浏览器联合解释的关键字。它们跨平台表现差异极大，构建工具可能静默丢弃，且不响应 prefers-color-scheme 或 forced-colors。
-
ButtonFace在 Windows 深色模式下可能是rgb(50, 50, 50)，在 macOS 下是rgb(240, 240, 240)，在 GNOME 上可能 fallback 到纯白 - Firefox 至今不支持
GrayText（2026 年 5 月仍无实现计划） - Lightning CSS 或 PostCSS 会把未知系统色当无效声明静默丢弃，开发者工具里整行变划掉，但不报错
-
color: CanvasText≠ 自动响应暗色模式——它只是“当前系统认为的文本色”，可能在深色模式下仍是浅灰，导致文字不可读
真正难防的不是名字写错，而是你误以为 rebeccapurple 比 #663399 “更高级”。它只是可读性糖衣，背后仍是固定 RGB；一旦项目要支持主题切换、色彩校验或无障碍对比度自动调整，那一处“看起来差不多就行”的妥协，就会变成 CI 构建后样式消失、高对比度模式白屏、contrast ratio 校验失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
