微前端 CSS 樣式隔離示範專案

這個專案展示微前端架構中的 CSS 樣式隔離方案，包含命名空間、CSS Modules、CSS-in-JS、Shadow DOM 和 Design Tokens。

專案結構

mfe-css-isolation/
├── shell/                 # Shell 主應用程式 (port 3000)
├── products/              # Products 微前端 (port 3001)
├── cart/                  # Cart 微前端 (port 3002)
├── shared/                # 共用模組
│   └── design-tokens/     # Design Tokens
└── package.json

Git Tags

Tag	說明
v0.1-init	初始化專案結構
v0.2-css-conflict	展示 CSS 衝突問題
v0.3-namespace	命名空間方案（BEM + 前綴）
v0.4-css-modules	CSS Modules 方案
v0.5-css-in-js	CSS-in-JS 方案
v0.6-shadow-dom	Shadow DOM 方案
v0.7-design-tokens	Design Tokens
v0.8-complete	專案完成

切換到特定階段：

git checkout v0.2-css-conflict

核心概念

CSS 衝突問題

當多個微前端使用相同的類名時，會發生樣式衝突：

/* products/styles.css */
.button { background: blue; }

/* cart/styles.css */
.button { background: green; }

後載入的樣式會覆蓋前面的，導致不可預期的結果。

解決方案

1. 命名空間：加上微前端前綴 .mf-products__button
2. CSS Modules：建構時自動產生唯一類名
3. CSS-in-JS：執行時產生唯一類名
4. Shadow DOM：瀏覽器原生樣式隔離
5. Design Tokens：統一設計語言