CSS 新世代：Subgrid 与容器查询深度解析

1. Subgrid：跨越层级对齐的网格系统

传统 CSS Grid 中，子元素只能对齐自己所在网格单元格。Subgrid 的引入使得嵌套网格可以继承父级网格轨道，实现真正的跨组件对齐——这在卡片组件需要与父容器内容对齐时尤为有用。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.card {
  display: grid;
  /* 继承父级 3 列网格，参与父级轨道对齐 */
  grid-column: span 3;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
}

上述代码中，.card 内的子元素可以与 .grid-container 的列轨道对齐，无需手动计算尺寸。这是过去需要 JavaScript 才能实现的布局效果。

2. 容器查询：组件级响应式的革命

媒体查询（Media Queries）是基于视口尺寸决定样式，容器查询（Container Queries）则基于包含块的尺寸。这使得同一组件在不同容器中可以呈现不同布局——无需了解组件所在的具体页面位置。

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

3. @layer 级联控制：消除样式优先级战争

大型前端项目的 CSS 冲突通常来自选择器优先级（Specificity War）和源码顺序依赖。@layer 将样式表划分为命名层级，高层级样式永远覆盖低层级，无论选择器强度如何。

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; background: #0d1117; color: #e6edf3; }
}

@layer components {
  .card { background: #161b22; border-radius: 8px; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}

无论 .card 选择器写得多强，@layer utilities 中的 .mt-4 优先级由层级决定而非选择器计数。这从根本上消除了 !important 滥用和优先级计算混乱。

4. 颜色空间与动态色彩函数

CSS Color Level 4 引入了 oklch()、oklab()、color() 等新色彩函数，解决了传统 hsla() 在亮度感知上的不均匀性问题。OKLCH 对人眼感知的均匀性使得渐变色过渡更自然。

/* oklch: 更自然的渐变过渡 */
.button-primary {
  background: oklch(65% 0.24 250);
  transition: background 0.2s;
}
.button-primary:hover {
  background: oklch(70% 0.28 250);
}

/* relative 颜色语法：基于当前颜色派生变体 */
.button-secondary {
  background: oklch(from var(--button-primary) calc(l + 0.1) c h);
}

5. 渲染性能与开发者体验的权衡

Subgrid 和容器查询会触发浏览器 layout 重新计算，但现代浏览器（Chrome 117+、Firefox 71+、Safari 16+）已高度优化这些场景。实际性能影响在复杂列表场景下通常 < 1ms，可忽略不计。