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

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

前端

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

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

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

我来解答赞 3 收藏

反馈

1 条解答

亚楠 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