代码 Review 时怎么判断 CSS 写得是否规范？

Mc.艺嘉提问于 2026-03-05 15:28:19 阅读 35

前端

最近在团队做 Code Review，看到同事写的这段 CSS 有点拿不准要不要提意见，感觉写法不太规范但又说不上来具体问题在哪：

.btn {
  background: #007bff;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}
.btn:hover {
  background: #0056b3;
}

我查了下项目规范，好像要求用变量管理颜色和间距，但这段直接写死数值了。这种算不算要改的问题？

我来解答赞 11 收藏

反馈

2 条解答

Code°开心 Lv1

这代码确实有问题，主要三个性能和维护性隐患：

1. 硬编码颜色值是大忌，团队规范都说了用变量还这么写。维护时改个颜色要全局搜索替换，效率太低。应该用CSS变量或者预处理器的变量。

2. 间距值也是硬编码，如果项目有间距系统的话应该引用系统变量，这样改起来方便。

3. 选择器写得还行，但hover状态可以优化下性能。现在这样每次hover都会重绘，如果加上transition会更平滑。

改完应该是这样：

:root {

  --primary: #007bff;

  --primary-dark: #0056b3;

  --spacing-sm: 8px;

  --spacing-md: 16px;

  --radius: 4px;

}



.btn {

  background: var(--primary);

  color: white;

  padding: var(--spacing-sm) var(--spacing-md);

  border-radius: var(--radius);

  font-size: 14px;

  transition: background 0.2s ease;

}

.btn:hover {

  background: var(--primary-dark);

}

必须提意见让改，现在看是小问题，等项目大了这种写法会坑死人的。我review代码最烦看到这种硬编码，后期维护成本太高了。

2026-03-09 13:15

亚楠 Dev Lv1

这段CSS确实有问题，主要是没按规范用变量。改完应该长这样：

:root {

  --primary-color: #007bff;

  --primary-hover: #0056b3;

  --text-white: white;

  --padding-y: 8px;

  --padding-x: 16px;

  --radius: 4px;

  --font-size: 14px;

}



.btn {

  background: var(--primary-color);

  color: var(--text-white);

  padding: var(--padding-y) var(--padding-x);

  border-radius: var(--radius);

  font-size: var(--font-size);

}

.btn:hover {

  background: var(--primary-hover);

}

不改的话以后改主题色要全局搜索替换，容易漏。变量名按你们项目规范来就行，我这只是个例子。

另外建议把变量单独放个文件，所有组件都能引用。要是项目用scss/less就更简单了，直接$primary-color这种写法。

2026-03-05 16:00