CSS的发展历史

CSS最早由Håkon Wium Lie于1994年提出，作为解决HTML样式分离问题的方案。从最初的简单样式表到如今的强大工具，其发展历程反映了Web技术的演进轨迹。

初始阶段：CSS1的诞生

1996年W3C发布CSS1规范时，只包含最基础的样式控制功能。这个版本主要解决字体、颜色、间距等基本样式问题。典型的CSS1代码如下：

body {
  font-family: Arial;
  color: #333;
  line-height: 1.5;
}
h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

当时浏览器对CSS的支持非常有限，开发者常需要配合<font>等HTML标签实现样式效果。微软IE3在1996年成为首个支持CSS的商业浏览器，但实现存在大量bug。

重要突破：CSS2时代

1998年发布的CSS2引入了定位模型、媒体类型等关键特性。这个版本最显著的进步是实现了内容与表现的彻底分离。z-index和绝对定位的出现使复杂布局成为可能：

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  z-index: 10;
}
.print {
  display: none;
}
@media print {
  .print {
    display: block;
  }
}

但浏览器兼容性问题依然严重，特别是盒模型差异。IE6的怪异模式(Quirks Mode)成为开发者长期的痛点，常需要条件注释来针对性修复：

<!--[if IE 6]>
  <style>
    #content { width: 750px; }
  </style>
<![endif]-->

模块化革命：CSS3的演进

2001年开始，W3C转向模块化开发策略，将CSS3拆分为多个独立模块。这种开发方式允许不同特性独立演进：

• 选择器模块（2005）：新增属性选择器、结构伪类

input[type="text"] {
  border: 1px solid #ccc;
}
li:nth-child(odd) {
  background: #f5f5f5;
}

• 边框与背景模块（2005）：实现圆角、阴影

.button {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: linear-gradient(to bottom, #fff, #eee);
}

• 动画模块（2009）：关键帧动画

@keyframes slidein {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide {
  animation: slidein 1s ease-out;
}

现代布局体系

2017年CSS Grid布局成为标准，与Flexbox共同构成现代布局双雄：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
}

变量(Custom Properties)的引入使CSS具备更强的动态性：

:root {
  --primary-color: #06c;
}
.button {
  background-color: var(--primary-color);
}

新趋势与未来方向

Houdini项目正在开放CSS引擎的底层API，允许开发者扩展CSS功能。2023年推出的嵌套规则大大简化了代码结构：

.card {
  padding: 1rem;
  
  & .title {
    font-size: 1.2rem;
  }
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
}

颜色函数、容器查询等新特性持续扩展CSS的能力边界：

@container (width > 600px) {
  .widget {
    font-size: 1.5rem;
  }
}