xDev Asia

建構微前端設計系統。共用元件庫（Storybook）。 CSS 策略：CSS 模組、Tailwind。使用 CSS 變數進行主題化。版本控制策略。

微服務與微前端系統設計－從基礎到生產

第 5 部分：建構實用的微前端

亞洲開發網

簡介

當每個團隊建立自己的 MFE 時，使用者體驗很容易支離破碎。 Design System 是保持 MFE 之間使用者體驗一致性的唯一解決方案。

1.設計系統架構

Design System:
├── Design Tokens (CSS Variables)
│   ├── Colors, Typography, Spacing
│   └── Shadows, Border radius
├── Core Components (@company/ui)
│   ├── Button, Input, Select, Modal
│   ├── Table, Pagination, Toast
│   └── Layout: Grid, Stack, Container
├── Patterns (Form, Navigation, Data display)
└── Documentation (Storybook)

2.微前端的 CSS 策略

2.1 CSS衝突問題

MFE A: .btn { background: blue; }
MFE B: .btn { background: red; }
→ CSS cascade conflict!

2.2 解決方案

戰略	隔離	DX	性能
CSS 模組	✅ 範圍	好	最佳
順風 CSS	✅ 實用至上	太棒了	好
CSS-in-JS	✅ 運行時	好	好的
影子 DOM	✅ 硬邊界	複雜	好的

推薦： Tailwind CSS — 無衝突、一致的實用程式類別。

2.3 用於主題化的 CSS 變數

:root {
  --color-primary: #2563eb;
  --color-error: #dc2626;
  --color-background: #ffffff;
  --color-text: #1f2937;
  --font-family: 'Inter', sans-serif;
  --radius-md: 0.375rem;
}

[data-theme="dark"] {
  --color-background: #111827;
  --color-text: #f9fafb;
}

MFE 會根據主題自動使用 CSS 變數 →：

<button style={{ background: 'var(--color-primary)' }}>Click</button>

3.共享元件庫

@company/ui/
├── src/Button/, Input/, Modal/
├── package.json
└── tailwind.config.js (shared config)

透過模組聯盟共享分發：

shared: {
  '@company/ui': { singleton: true, requiredVersion: '^3.0.0' },
}

4. 故事書 — 生活文檔

export default { title: 'Components/Button', component: Button };
export const Primary = { args: { variant: 'primary', children: 'Click me' } };
export const Disabled = { args: { disabled: true, children: 'Disabled' } };

為所有團隊部署 Storybook → 單一事實來源。

5. 版本控制策略

語意版本控制：主要 = 破壞，次要 = 功能，補丁 = 修復
金絲雀版本：推出前在 1 MFE 上進行測試
向後相容：刪除之前棄用

總結

微前端需要設計系統
CSS 變數 用於主題 — 深色模式、品牌
推薦 Tailwind CSS — 無衝突
故事書 = 活生生的文獻

下一篇文章： 第 16 課：身份驗證與授權 — 微前端的 SSO

第 15 課：設計系統和共享 UI — 保持 UX 一致

簡介