一、基础样式基座的核心价值

很多做前端产品的团队，都会碰到同一个头疼的问题：手里攥着好几个产品线，用户换个产品就像进了全新的APP，按钮圆角大小不一样、文字间距乱飘、连最基础的段落边距都不统一，开发者改样式要复制粘贴十几套代码，产品要换个品牌色更是要熬夜改几百处。这就是没做基础样式基座的锅——它就是前端的“装修基础”，把墙面、地面、水电都铺好，后面再装柜子、挂照片就省心多了。

1.1 解决多产品线的视觉混乱

比如公司有电商、OA后台、会员中心三个产品，没做基座前，三个产品的主按钮：电商按钮圆角4px，OA按钮圆角8px，会员按钮圆角12px；按钮内边距有的是上下6px左右12px，有的是上下8px左右16px，用户第一次切产品会懵：“这真的是同一家公司的产品吗？”做了基座后，所有按钮按统一规范来，用户不用重新适应，视觉连贯性直接拉满。

1.2 降低扩展和维护成本

加新功能不用再单独调整每个产品的样式，改一个地方的规范，全公司产品都生效。比如要把所有文字的颜色从黑色改成深灰色，不用逐个产品找p标签改，只要改基座里的变量就行，省了80%的样式维护时间。

二、基础样式基座的三大核心模块

基座不是复杂的框架，就是三个小模块：干掉浏览器默认差异的重置样式、定好文字规矩的排版基准、规范留白的间距刻度，每个模块都用可复用的规则，不用重复造轮子。

2.1 重置样式：干掉浏览器的“默认坏习惯”

每个浏览器都有自己的默认样式，比如Chrome里p标签的默认margin是16px，Firefox里是12px，h1的默认大小也不一样，重置样式就是把这些“坏习惯”拉到同一起跑线，避免不同浏览器显示不一样。我们用CSS来写重置，统一所有浏览器的基础样式，示例如下：

<!-- 示例：引入重置样式后的HTML结构 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 必须先引入重置样式，再写自己的业务样式 -->
  <link rel="stylesheet" href="./base-reset.css">
  <link rel="stylesheet" href="./business-style.css">
</head>
<body>
  <h1>重置样式效果展示</h1>
  <p>没做重置前，我在不同浏览器里的上下间距会乱，现在全统一了</p>
  <button>测试按钮</button>
</body>
</html>

/* 重置样式文件base-reset.css，跨浏览器统一基础规则 */
* {
  margin: 0;
  padding: 0;
  /* 重要：避免元素宽高计算混乱，padding不会撑大元素 */
  box-sizing: border-box;
}
html, body {
  /* 统一行高，不同浏览器默认行高不一样，选1.5是最舒服的阅读比例 */
  line-height: 1.5;
  /* 跨平台通用字体，不会出现Windows雅黑、Mac苹方的区别 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  /* 把标题的默认大字体改掉，统一继承父元素大小，需要加粗自己加 */
  font-size: inherit;
  font-weight: normal;
}
ul, ol {
  /* 去掉列表的默认圆点、数字，自己需要再加 */
  list-style: none;
}
a {
  /* 去掉链接默认下划线，颜色继承父元素，避免和其他文字不一样 */
  text-decoration: none;
  color: inherit;
}
button, input, textarea {
  /* 表单元素字体统一，不会出现奇怪的系统默认字体 */
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer; /* 按钮默认手势，提升交互感 */
}

2.2 排版基准：给文字定好“阅读规矩”

文字是产品的核心，随便设大小会让用户读着累，排版基准就是定好所有文字的层级，比如页面主标题多大、正文多大、辅助文字多大，用CSS变量管理，改一个变量全生效。示例：

/* 排版基准文件base-typography.css，用变量统一文字规则 */
:root {
  /* 字体大小，以16px为基础，rem单位适配手机、平板、电脑 */
  --font-size-xs: 0.75rem; /* 辅助说明文字，比如“发布时间” */
  --font-size-sm: 0.875rem; /* 次要文字，比如小标签、次要按钮 */
  --font-size-base: 1rem; /* 正文，最常用的字号 */
  --font-size-lg: 1.125rem; /* 卡片标题，比正文大一点 */
  --font-size-xl: 1.5rem; /* 一级标题，页面主标题 */
  --font-size-2xl: 2rem; /* 模块标题，比如商品列表的标题 */

  /* 行高，标题用紧凑行高，正文用宽松行高，提升阅读体验 */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
}
/* 给不同层级的文字用变量，确保统一 */
h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: 600; /* 标题需要加粗，统一设成600 */
}
p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md); /* 这里用了后面的间距刻度，统一段落间距 */
}
.small-text {
  font-size: var(--font-size-sm);
  color: #666; /* 次要文字统一用灰色，不要乱改颜色 */
}

比如你写正文不用想“我要设16px还是15px”，直接用--font-size-base，全公司产品的正文都是16px，用户读起来不会累，视觉也统一。

2.3 间距刻度：让页面“留白”有标准

页面的间距（比如元素之间的距离、内边距）不能随便写10px、13px，要按固定的倍数来，比如4px、8px、16px、24px，这样页面看起来有规律，不会乱。间距刻度就是把这些数值做成变量，示例：

/* 间距刻度文件base-spacing.css，所有间距都用这里的变量 */
:root {
  /* 间距都是4px的倍数，好计算，视觉也协调 */
  --spacing-xs: 4px; /* 超小间距，比如图标和文字的距离 */
  --spacing-sm: 8px; /* 小间距，按钮内边距的左右 */
  --spacing-md: 16px; /* 中等间距，卡片内边距、组件之间的距离 */
  --spacing-lg: 24px; /* 大间距，模块之间的距离，比如商品列表和顶部的距离 */
  --spacing-xl: 32px; /* 超大间距，页面区块之间的距离 */
}
/* 写快捷类，开发者不用想变量名，直接用类就行 */
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }

比如做一个按钮，不用写padding: 8px 16px，直接写class="p-sm inline-flex items-center"，全公司的按钮内边距都是8和16，间距统一，页面看起来就不会东一块西一块。

三、基础样式基座的应用场景

3.1 多产品线的视觉统一

比如公司有ToC的电商和ToB的OA系统，以前两个产品的按钮样式完全不一样，用户切换会混淆，用基座后，两个产品的按钮都按规范来，不管是电商里的“加入购物车”还是OA里的“提交申请”，样式都一样，视觉连贯性拉满。

3.2 团队新人快速上手

刚入职的前端新人不用再问“这个样式要写多少px”，直接看基座的文档，用变量或者快捷类就行，避免乱写自定义样式，减少踩坑。

3.3 快速更换品牌规范

如果公司换品牌色，不用逐个产品找颜色改，只要修改基座里的颜色变量，全产品的文字、按钮、背景色一键更新，节省大量时间。

四、技术优缺点

4.1 优点

一是减少重复代码，比如每个产品的重置样式、排版都一样，不用每个产品都写，省了很多工作量；二是视觉统一，用户体验更好，不会觉得是不同公司的产品；三是维护和扩展快，改一个变量就全生效；四是团队协作顺畅，大家都按同一个规范来，不会乱。

4.2 缺点

一是初期要花时间搭建，不能立刻出活，需要团队达成共识；二是如果变量设得太死板，太个性化的需求可能要额外调整；三是需要团队配合，要是有人偷偷写自定义样式，规范就白费了。

五、注意事项

一是不要过度重置，比如表单的输入框样式，必要的功能要保留，不然输入框会看起来很奇怪；二是变量命名要统一，比如不要有的叫font-size-base，有的叫fs-base，容易乱；三是要做规范文档，告诉团队成员什么时候用基座的样式，什么时候可以自定义；四是定期检查，发现有人用自定义样式要及时纠正，确保大家遵守规则。

六、总结

基础样式基座不是什么高大上的框架，就是三个核心模块：重置样式拉平浏览器差异，排版基准定好文字规矩，间距刻度规范留白，三者结合起来，让不同产品线的视觉语言连贯，也让样式的扩展和维护更简单。对前端团队来说，它就是降低沟通成本、提升产品体验的基础工具，哪怕小团队做了也能省很多麻烦。