2026西湖龙井茶官网DTC发售:茶农直供,政府溯源防伪到农户家
我曾带领一个由 4 名标记语言开发人员组成的团队。第一周,我创建了一个拉取请求(PR),结果发现了这样的情况:
// 开发人员 A
.card {
z-index: 999;
color: #fff;
padding: 13px;
display: flex;
align-items: center;
}
// 开发人员 B
.modal {
z-index: 9;
color: var(--color-white);
padding: 15px;
align-items: center;
display: flex;
}
同一个项目。同一种组件类型。却有着完全不同的规范。13px 对 15px —— 没人知道为什么。原始十六进制颜色值对自定义属性 —— 没人达成一致。z-index: 9 对 z-index: 999 —— 没人进行协调。
我们召开了一次启动会议。我们写下了各项规范。两个月后,每个人都忘记了一半的内容。新加入的团队成员 —— 根本不知道这些规范的存在。
就在那时,我不再试图让人们去记住规则。我开始让规则变得无法被遗忘。
约定会消亡。代码检查工具不会。
写在自述文件(README)中的规范只是一种愿望。而 Stylelint 规则则是法律。
区别在于:
- 约定:“我们不使用原始十六进制颜色值” → 资深开发人员在截止日期压力下依然这样做 → 没人提出异议 → 标准在两周内瓦解
- 代码检查工具规则:
color: #fff→ 构建失败 → 没人能合并代码 → 标准永远保持有效
代码检查工具不会疲倦。不会为自己破例。休假回来后也不会遗忘。它会每次审查每个拉取请求(PR)中的每一行代码。
目标不是控制 —— 而是自由。当你的团队不需要费力记住各种规范时,他们就可以专注于解决实际问题。
1. 为所有内容建立令牌系统
基础原则:任何地方都不使用魔术数字。颜色中不用,间距中不用,排版中也不用。一切通过令牌(tokens)来实现。
间距令牌
事情实际上是这样开始的。
一名开发人员实现了一个卡片组件。拉取请求(PR)被重新打开:“内边距应该是 12px,而不是 13px。” 开发人员打开 Figma —— 设计稿上清楚地显示着 13px。回复道:“但设计稿上写的是 13。” 来回争论。两个人都没错,却在为一个像素争执不下。
为什么会发生这种情况?在任务到达开发人员手中之前,设计稿已经经历了 50 次修订。客户希望按钮更大一些。产品经理希望卡片更紧凑一些。设计师移动元素、调整、微调。经过 50 次迭代 —— 没人审计每一个间距值。在第 3 版修订中起始为 16px 的内边距,到了第 47 版修订时变成了 13px。没人注意到。设计师没注意到。开发人员也不知
免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。