在前端開發中，CSS管理一直是項目可維護性的關鍵挑戰。據統計，約35%的樣式問題源于缺乏統一的CSS架構規范。common.css（或稱全局樣式表）作為項目的基礎樣式層，能夠有效解決以下問題：

1. 樣式碎片化：避免重復定義基礎樣式
2. 設計不一致：確保UI元素遵循統一規范
3. 維護困難：集中管理全局樣式變更
4. 性能優化：減少冗余CSS代碼體積

本文將深入剖析如何構建一個面向現代Web開發的common.css架構。

1. common.css的模塊化設計

1.1 核心模塊劃分

common.css
├── 重置與標準化 (reset)
├── 設計令牌 (design tokens)
├── 基礎元素 (base)
├── 布局系統 (layout)
├── 工具類 (utilities)
└── 第三方覆蓋 (vendor)

1.2 現代CSS重置方案

/* 基于瀏覽器默認樣式進行針對性重置 */
:where(*, *::before, *::after) {box-sizing: border-box;min-width: 0;
}:where(html) {block-size: 100%;-webkit-text-size-adjust: none;
}:where(body) {min-block-size: 100%;line-height: 1.5;text-rendering: optimizeLegibility;
}/* 移除表單元素默認樣式 */
:where(input, button, textarea, select) {font: inherit;color: inherit;
}

關鍵改進：

• 使用:where()降低特異性（從0到0）
• 保留有用的默認樣式（如<ul>的列表樣式）
• 采用現代CSS屬性如block-size

1.3 設計令牌系統

/* 顏色系統 */
:root {/* 主色系 */--color-primary: oklch(65% 0.25 250);--color-secondary: oklch(70% 0.2 30);/* 語義色 */--color-success: oklch(75% 0.2 145);--color-danger: oklch(65% 0.25 25);/* 明暗主題 */color-scheme: light dark;--text-primary: oklch(20% 0 0);--surface-primary: oklch(98% 0 0);
}@media (prefers-color-scheme: dark) {:root {--text-primary: oklch(95% 0 0);--surface-primary: oklch(15% 0 0);}
}

現代實踐：

• 使用OKLCH色彩空間實現更均勻的色彩變化
• 遵循WCAG 2.2對比度標準
• 支持操作系統級暗黑模式

2. 響應式基礎架構

2.1 現代排版系統

/* 流體排版 */
:root {--fluid-min-width: 320px;--fluid-max-width: 1440px;--fluid-min-scale: 1.2;--fluid-max-scale: 1.333;
}h1 {font-size: clamp(calc(1rem * var(--fluid-min-scale)), calc(1rem + 2vw), calc(1.5rem * var(--fluid-max-scale)));
}/* 優化閱讀體驗 */
article {max-width: 65ch;hanging-punctuation: first;
}

2.2 自適應間距系統

:root {--space-unit: 1rem;--space-ratio: 1.5;--space-xxs: calc(var(--space-unit) / (var(--space-ratio) * 2));--space-xs: calc(var(--space-unit) / var(--space-ratio));/* ...其他間距等級... */
}/* 邏輯屬性間距 */
.m-block-start-1 { margin-block-start: var(--space-unit); }
.p-inline-2 { padding-inline: var(--space-md); }

3. 實用工具類進化

3.1 現代工具類設計

/* 容器查詢工具 */
@container (min-width: 30em) {.cq\:flex-row { flex-direction: row; }
}/* 滾動相關 */
.scroll-smooth { scroll-behavior: smooth; }
.scbar\:thin {scrollbar-width: thin;scrollbar-color: var(--color-primary) transparent;
}/* 交互狀態 */
.hover\:scale:hover {scale: 1.05;transition: scale 200ms ease-out;
}

3.2 原子化CSS實踐

/* 基于設計令牌的原子類 */
.bg-primary { background: var(--color-primary); }
.text-3d {text-shadow: 1px 1px 0 var(--color-shadow),2px 2px 0 var(--color-shadow);
}/* 響應式可見性 */
.visible\:md {display: none;@media (min-width: 768px) {display: block;}
}

4. 性能優化策略

4.1 層疊層(CSS Layers)管理

@layer reset, base, components, utilities;@layer reset {/* 重置樣式 */
}@layer utilities {/* 工具類永遠最后加載 */.hidden { display: none; }
}

4.2 關鍵CSS提取

/* critical.css */
:root {--color-bg: #fff;--color-text: #222;
}
body {font-family: system-ui, sans-serif;background: var(--color-bg);color: var(--color-text);
}

4.3 現代選擇器優化

/* 避免使用 * 選擇器 */
:where(h1, h2, h3, h4, h5, h6) {margin-block: 0;
}/* 屬性選擇器優化 */
[class^="text-"] {font-family: var(--font-text);
}

5. 與組件庫的協作模式

5.1 設計系統對接

/* 組件變量繼承 */
dialog {--dialog-bg: var(--surface-primary);background: var(--dialog-bg);
}

5.2 主題切換方案

.theme-dark {--color-primary: oklch(70% 0.25 250);--surface-primary: oklch(15% 0 0);
}@media (prefers-color-scheme: dark) {.theme-auto {--color-primary: oklch(70% 0.25 250);}
}

6. 構建與部署優化

6.1 PostCSS處理流程

// postcss.config.js
module.exports = {plugins: [require('postcss-import'),require('postcss-jit-props')({files: ['./design-tokens.css']}),require('autoprefixer'),require('cssnano')({preset: ['advanced', {discardComments: { removeAll: true }}]})]
}

6.2 現代特性檢測

/* 漸進增強 */
@supports (height: 1dvh) {:root {--viewport-height: 100dvh;}
}

7. 結語：common.css的未來演進

隨著CSS新特性的不斷涌現，common.css的架構也需要持續進化：

1. CSS Nesting：改善代碼組織結構
2. Scope樣式：解決樣式污染問題
3. View Transitions：增強頁面過渡效果
4. CSS Anchor Positioning：更靈活的定位方案

一個優秀的common.css應該：

• 體積控制在15KB以內（壓縮后）
• 覆蓋80%以上的基礎樣式需求
• 提供良好的自定義擴展點
• 保持與設計系統的同步更新

通過本文介紹的方法，你可以構建出適應現代Web開發需求的common.css架構，為項目打下堅實的樣式基礎。記住，好的CSS架構應該像優秀的城市規劃——既要有宏觀布局，也要關注微觀細節。