团队中的 CSS:我是如何停止解释规则并开始强制执行它们的

发布日期:2026-04-16 13:34:23   浏览量 :5
发布日期:2026-04-16 13:34:23  
5

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;
}

同一个项目。同一种组件类型。却有着完全不同的规范。13px15px —— 没人知道为什么。原始十六进制颜色值对自定义属性 —— 没人达成一致。z-index: 9z-index: 999 —— 没人进行协调。

我们召开了一次启动会议。我们写下了各项规范。两个月后,每个人都忘记了一半的内容。新加入的团队成员 —— 根本不知道这些规范的存在。

就在那时,我不再试图让人们去记住规则。我开始让规则变得无法被遗忘。

约定会消亡。代码检查工具不会。

写在自述文件(README)中的规范只是一种愿望。而 Stylelint 规则则是法律。

区别在于:

  • 约定:“我们不使用原始十六进制颜色值” → 资深开发人员在截止日期压力下依然这样做 → 没人提出异议 → 标准在两周内瓦解
  • 代码检查工具规则:color: #fff → 构建失败 → 没人能合并代码 → 标准永远保持有效

代码检查工具不会疲倦。不会为自己破例。休假回来后也不会遗忘。它会每次审查每个拉取请求(PR)中的每一行代码。

目标不是控制 —— 而是自由。当你的团队不需要费力记住各种规范时,他们就可以专注于解决实际问题。

1. 为所有内容建立令牌系统

基础原则:任何地方都不使用魔术数字。颜色中不用,间距中不用,排版中也不用。一切通过令牌(tokens)来实现。

间距令牌

事情实际上是这样开始的。

一名开发人员实现了一个卡片组件。拉取请求(PR)被重新打开:“内边距应该是 12px,而不是 13px。” 开发人员打开 Figma —— 设计稿上清楚地显示着 13px。回复道:“但设计稿上写的是 13。” 来回争论。两个人都没错,却在为一个像素争执不下。

为什么会发生这种情况?在任务到达开发人员手中之前,设计稿已经经历了 50 次修订。客户希望按钮更大一些。产品经理希望卡片更紧凑一些。设计师移动元素、调整、微调。经过 50 次迭代 —— 没人审计每一个间距值。在第 3 版修订中起始为 16px 的内边距,到了第 47 版修订时变成了 13px。没人注意到。设计师没注意到。开发人员也不知

免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。

关于我们
热门推荐
合作伙伴
免责声明:本站部分资讯来源于网络,如有侵权请及时联系客服,我们将尽快处理
支持 反馈 订阅 数据
回到顶部