9年经验：变量命名别用color，用bg_hue更包容
发布时间：2026-10-09 05:16:23 所属栏目：语言 来源：DaWei
导读：我上周四晚上九点四十在 GitLab 的合并请求里看到一行 `const color = '#FF0000';`，提交人把告警背景、文字颜色和图标色全塞进这个变量，旁边还挂着三十七条未解决的 review comments。小赵甩了句“能用就行，别整命名警
|
我上周四晚上九点四十在 GitLab 的合并请求里看到一行 `const color = '#FF0000';`，提交人把告警背景、文字颜色和图标色全塞进这个变量，旁边还挂着三十七条未解决的 review comments。小赵甩了句“能用就行，别整命名警察那套”，鼠标还在点 Approve。我把他拦下来，这根本不是在命名，是在给未来埋雷。 别拿 color 当万能垃圾桶
文章配图，仅供参考 `color` 这个词居然能同时指前景、背景、边框、图标，堪称语义黑洞。同一个变量在 `.btn` 里是文字色，在 `.toast` 里是背景色，在 `config.yaml` 里又变成状态色，ESLint 的 `no-unused-vars` 抓不到这种漂移，SonarQube 也只报重复不报语义。上周五早上八点零五，我在 SonarQube 上跑扫描，看到 `color` 相关规则命中两百一十三处，其中一百四十七处是同一段复制粘贴。安全告警用红色、黄色、绿色区分风险，色盲同事看红绿都是灰，你绝对不想在告警上赌这个。bg_hue 比 color 窄得刚好 `bg_hue` 只说自己管背景色相，不绑定具体色值，用 CSS 自定义属性 `--bg-hue` 配合 `hsl()`，暗色模式只调饱和度和亮度，色相不动。我昨天下午三点二十拉下分支，在 Chromium DevTools 的 Rendering 面板勾选 `prefers-color-scheme: dark`，看到对比度从 4.6:1 掉到 1.8:1，WCAG 2.1 直接判失败。改成 `bg_hue` 后，同一个告警组件在亮色和暗色下都过了 4.5:1。用 `bg_hue` 不是说它多高级，是它窄得刚好，命名窄一点，代码活久点。 暗色模式专治嘴硬选手 二零一七年，我在政务云安全配置平台，把风险等级颜色写成十六个硬编码色值，变量全叫 `color1` 到 `color16`，当时没有暗色模式，没有色盲模式，前端老周说“先上线，命名以后再说”，结果这“以后”拖了七年。上个月我翻 GitLab CI 历史，发现 `color1` 到 `color16` 还在三个内部系统里跑，其中一个系统升级到 MySQL 8.0 后，配置表 `yl_color` 还保留着遗留写法，返回码 502 的页面背景直接是硬编码 `#FF0000`，黑底红字，简直没法看。 色盲同事不是边角料 我上周二下午四点十分在 Chromium 里装了色盲模拟扩展，切到红绿色盲模式，看到三套告警色全部变成同一团灰，分不出高危和中危。小赵后来改口说“那就换成 bg_hue 吧”，手指在键盘上敲了两下。我实测把 `bg_hue` 拆成 `--bg-hue-danger`、`--bg-hue-warn`、`--bg-hue-ok`，再配不同图标形状，色盲模式下也能区分。这根本不是审美问题，是可用性问题。 我改过十六个遗留色值 改 `bg_hue` 不是把 `color` 全替换就完事，得先把语义拆开。前景色叫 `fg_hue`，边框叫 `border_hue`，状态色叫 `state_hue`，背景才用 `bg_hue`。我昨天早上九点十五在本地跑 ESLint 自定义规则 `no-ambiguous-color`，扫出八十九个 `color` 变量，其中三十四个跨了三种用途。SonarQube 的重复代码率从 8.3% 降到 4.1% 是改完之后的事。命名这事绝对别偷懒，你省下的三秒，后面有人要花三小时。 命名窄一点代码活久点 现在新项目里的 `color` 词根我基本不让过，GitLab CI 里加了一条 grep，构建日志出现 `const color` 或 `let color` 直接 502，想合并先改 `bg_hue` 或 `fg_hue`。小赵昨天提交了第一版，变量名从 `color` 变成 `bg_hue`，review comments 从三十七条掉到六条。我盯着那条 diff，心想这玩意儿早该这么写。 （编辑：站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐