不建议在生产环境使用命名颜色，因其本质是硬编码rgb值，无语义、不可计算、不支持透明度和主题切换，且易因拼写错误、工具链兼容性或无障碍检测缺失导致静默失效。
直接在生产环境用 red、tomato 这类命名颜色，等于把设计系统钉死在 140 个不可变、无语义、不参与计算的硬编码 RGB 值上——改色、换主题、加透明度、做对比度校验，全都要手动翻代码。
命名颜色是静态别名，不是变量
写 color: tomato，浏览器立刻替换成 rgb(255, 99, 71)，之后就和 tomato 这个词彻底无关。它不绑定“错误提示”或“主强调色”这类设计意图，也不响应 @media (prefers-color-scheme: dark) 或 color-mix()。
-
--primary: tomato之后，color: calc(var(--primary) * 1.2)直接解析失败 - 想加透明度？
rgba(tomato, 0.8)是非法语法，必须先转成rgb(255, 99, 71)再套rgba() - 深色模式下
lightgray可能被系统强制映射为黑，而#d3d3d3始终稳定
拼写/大小写错误静默失效
浏览器只认 W3C 官方定义的 140 个全小写、无空格、无连字符名称。哪怕错一个字母，就直接忽略该声明，元素回退为继承色或默认色，不报错也不提示。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
RebeccaPurple（大写 P）、midnightblue（少一个 e）、light-gray（带连字符）全部无效 - 查证方式：Chrome DevTools 的 Styles 面板里输入
color: xxx，如果值被划掉或没高亮，说明不识别 -
currentColor是关键字，但currentColor（首字母大写）完全无效
构建工具链可能悄悄剔除或错位
PostCSS、Sass、cssnano 等工具对命名颜色的支持高度依赖版本。CI/CD 环境中预装的 Docker 镜像，其工具链版本常比本地低 2~3 个 minor 版本。
- 老版 cssnano 会把未收录在 CSS Color Module Level 4 中的颜色名（如
Tomato、RebeccaPurple）当作无效值直接剔除 - Webpack 的
MiniCssExtractPlugin在 production 模式下启用 scope hoisting 时，遇到未声明的命名色，可能跳过整个规则块 - 无障碍检测工具（如 axe-core）通常只校验
#ff6347、rgb(255,99,71)、hsl(9,100%,64%)等可计算格式，对Tomato直接跳过对比度检查
单边颜色属性里容易“有设置却无效果”
单独设 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之后，否则会被覆盖
真正麻烦的不是写错一个 tomato，而是当你需要把全站“番茄红”换成“珊瑚红”，得人工核对 28 处散落的 color: Tomato、background: tomato、box-shadow: ... Tomato——大小写不敏感，正则替换极易漏掉或误伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
