现代 CSS 布局指南

Grid 不是 Flexbox 的替代品

很多开发者学会 Grid 后就放弃了 Flexbox，这是错误的。两者有不同的适用场景：

Flexbox 的最佳场景

• 导航栏（一维水平排列）
• 卡片内元素的垂直排列
• 表单输入框 + 按钮的行内对齐

Grid 的最佳场景

• 页面整体布局（header / main / sidebar / footer）
• 图片画廊
• 仪表盘卡片网格

Container Queries 改变了组件设计

Container Queries 让我们可以基于容器宽度而非视口宽度做响应式：

/* 传统作法：基于视口 */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* 现代作法：基于容器 */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

CSS Nesting 是真正的游戏规则改变者

原生的 CSS 嵌套消除了对 Sass/SCSS 的最后一个硬依赖：

.card {
  padding: 1rem;

  & .title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

总结

2026 年了，CSS 平台能力已经强到可以覆盖大部分 CSS-in-JS 的使用场景。善用平台能力，减少依赖。