在前端开发中，CSS管理一直是项目可维护性的关键挑战。据统计，约35%的样式问题源于缺乏统一的CSS架构规范。common.css（或称全局样式表）作为项目的基础样式层，能够有效解决以下问题：

样式碎片化：避免重复定义基础样式
设计不一致：确保UI元素遵循统一规范
维护困难：集中管理全局样式变更
性能优化：减少冗余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的架构也需要持续进化：

CSS Nesting：改善代码组织结构
Scope样式：解决样式污染问题
View Transitions：增强页面过渡效果
CSS Anchor Positioning：更灵活的定位方案

一个优秀的common.css应该：

体积控制在15KB以内（压缩后）
覆盖80%以上的基础样式需求
提供良好的自定义扩展点
保持与设计系统的同步更新

通过本文介绍的方法，你可以构建出适应现代Web开发需求的common.css架构，为项目打下坚实的样式基础。记住，好的CSS架构应该像优秀的城市规划——既要有宏观布局，也要关注微观细节。