如何统一前端 large、middle、small 样式大小？

Question

在前端开发中，如何统一 large、middle、small 三种尺寸样式的定义与应用是一大常见问题。团队协作时，不同开发者对尺寸的理解不一，导致按钮、输入框等组件在不同页面呈现不一致。例如，有人将 small 定义为 32px 高，另一些人则用 36px，造成样式混乱。此外，CSS 变量、SCSS 混合宏或设计系统缺失也加剧了维护难度。如何通过设计 Token、建立样式规范并结合 CSS-in-JS 或原子化 CSS 方案，实现跨组件、跨项目的尺寸统一，是提升 UI 一致性和开发效率的关键挑战。

Answer 1

一、问题背景与挑战

在现代前端开发中，UI 组件的尺寸一致性是保障用户体验和设计语言统一的核心要素。随着项目规模扩大和团队成员增多，large、middle、small三类常见尺寸在按钮、输入框、弹窗等组件中的定义逐渐出现分歧。

例如，开发者 A 在实现一个 small 按钮时使用 height: 32px，而开发者 B 则采用 36px，这种看似微小的差异在多个页面叠加后会导致严重的视觉割裂感。

更深层次的问题在于：缺乏统一的设计 Token 管理机制、样式系统解耦不足、技术栈选择多样（如 SCSS、CSS-in-JS、Tailwind CSS）导致样式逻辑分散，最终形成“样式债”。

二、从基础到进阶：尺寸统一的演进路径

1. 阶段一：硬编码样式 —— 初期项目常直接在组件内写死尺寸值，如 style="height: 32px"，维护成本高且无法复用。
2. 阶段二：CSS 类名约定 —— 使用命名规范如 .btn-small、.input-large，但易被误用或覆盖。
3. 阶段三：预处理器变量（SCSS/Less） —— 引入 $size-small: 32px 提升可维护性，但仍局限于单一项目。
4. 阶段四：CSS 自定义属性（CSS Variables） —— 支持运行时动态切换主题与尺寸，具备跨组件能力。
5. 阶段五：设计 Token 驱动 —— 将尺寸抽象为语义化 token，如 --size-button-small，实现设计与代码解耦。
6. 阶段六：原子化 CSS 或 CSS-in-JS 方案集成 —— 结合 Tailwind、Styled Components 等工具，实现高效、一致的样式应用。

三、核心解决方案架构

方案	优点	缺点	适用场景
CSS Variables	原生支持，轻量，可动态更新	无类型检查，难以追踪依赖	中小型项目，多主题需求
SCSS Mixins + 变量文件	编译期优化，结构清晰	不支持运行时变更，耦合构建流程	传统 Webpack 项目
CSS-in-JS (Styled Components / Emotion)	组件级封装，支持 props 动态生成样式	运行时开销，调试复杂	React 生态，高定制化组件库
原子化 CSS (Tailwind, Windi CSS)	极致性能，类名即样式，易于统一	学习曲线陡峭，需配置设计约束	大型团队，追求开发效率
Design Tokens + Style Dictionary	跨平台输出（Web/iOS/Android），高度标准化	初期投入大，需设计系统支撑	企业级设计系统建设

四、设计 Token 的实践落地

设计 Token 是将视觉设计中的尺寸、颜色、间距等元素进行语义化命名的中间层。以尺寸为例：

// tokens.json
{
  "size": {
    "button": {
      "small": { "value": "32px" },
      "medium": { "value": "40px" },
      "large": { "value": "48px" }
    },
    "input": {
      "small": { "value": "32px" },
      "medium": { "value": "40px" },
      "large": { "value": "52px" }
    },
    "radius": {
      "small": { "value": "4px" },
      "medium": { "value": "8px" },
      "large": { "value": "12px" }
    }
  }
}
  

通过 Style Dictionary 工具可自动生成对应平台的变量文件：

• CSS Variables 输出
• SCSS 变量文件
• JavaScript 模块供 CSS-in-JS 使用
• Android / iOS 资源文件

五、结合 CSS-in-JS 实现动态尺寸控制

在 React 项目中，使用 Emotion 配合设计 Token 可实现高度灵活的尺寸系统：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyles = (props) => css`
  height: var(--size-button-${props.size}, 40px);
  padding: 0 16px;
  font-size: ${props.size === 'small' ? '12px' : props.size === 'large' ? '16px' : '14px'};
  border-radius: var(--size-radius-medium);
  background: #1890ff;
  color: white;
  cursor: pointer;
`;

function Button({ size = 'medium', children }) {
  return <button css={buttonStyles({ size })}>{children}</button>;
}
  

该模式下，所有尺寸均来源于 CSS Variables，确保即使在不同组件中调用，也能保持一致性。

六、原子化 CSS 中的尺寸规范化策略

以 Tailwind CSS 为例，可通过配置 theme.sizes 和 theme.spacing 来限制合法尺寸范围：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'btn-sm': '32px',
        'btn-md': '40px',
        'btn-lg': '48px',
      },
      borderRadius: {
        'sm': '4px',
        'md': '8px',
        'lg': '12px',
      }
    },
  },
  plugins: [],
}
  

然后在模板中使用：

<button class="h-btn-md rounded-md px-4 py-2 bg-blue-500 text-white">
  提交
</button>
  

通过约束类名前缀和值域，避免随意使用 h-8、h-10 等非标尺寸。

七、可视化流程：尺寸系统集成流程图

graph TD
      A[设计稿 Sketch/Figma] -- 提取 --> B(设计 Token 定义)
      B --> C{输出目标}
      C --> D[CSS Variables]
      C --> E[SCSS 变量文件]
      C --> F[JS/TS 模块]
      C --> G[Android/iOS 资源]
      D --> H[Web 项目引用]
      E --> H
      F --> I[CSS-in-JS 组件]
      H --> J[Button/Input 组件]
      I --> J
      J --> K[统一渲染效果]

八、团队协作中的规范落地建议

• 建立 Design System 文档站，公开所有尺寸 Token 及使用示例。
• 在 CI 流程中加入 Linting 规则，禁止使用 magic number（如 32px 直接写入样式）。
• 提供 VSCode Snippets 或 IDE 插件，自动补全标准尺寸类名或变量。
• 组织定期的 Design-Dev 对齐会议，确保 Token 与实际设计同步。
• 使用 Figma Tokens 插件实现设计工具与代码系统的双向同步。
• 对新入职开发者进行 样式系统培训，强调 Token 使用优先级高于手动写样式。
• 在 Storybook 中为每个组件标注所使用的尺寸 Token，增强可追溯性。
• 推动将 Token 系统纳入前端脚手架默认模板。
• 监控线上样式异常，建立 视觉回归测试 机制。
• 鼓励跨项目复用核心 Token 包，通过 npm 私服发布 @company/design-tokens。