现代 CSS 技巧：让你的代码更优雅

CSS 在过去几年发生了翻天覆地的变化。曾经需要 JavaScript 或复杂 hack 才能实现的效果，现在只需要几行 CSS 就能搞定。

今天我来分享一些我在实际项目中经常使用的现代 CSS 技巧。

1. CSS 变量与主题切换

CSS 自定义属性（变量）是实现主题切换的完美方案：

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

.dark {
  --bg-color: #1a1a1a;
  --text-color: #e5e5e5;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

结合 prefers-color-scheme 媒体查询，还可以自动适配系统主题。

2. Container Queries

这是 2024 年最让我兴奋的特性。终于可以基于容器大小而不是视口大小来响应式布局了：

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

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

3. :has() 选择器

「父选择器」终于来了！这个选择器能让你基于子元素状态来选择父元素：

/* 当表单内有无效输入时，改变表单样式 */
form:has(input:invalid) {
  border-color: red;
}

/* 当卡片有图片时，调整布局 */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

4. Scroll-driven Animations

用 CSS 实现滚动驱动的动画，不再需要 JavaScript：

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

5. Subgrid

子网格让嵌套元素可以对齐到父网格的轨道：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

最后的思考

CSS 的发展速度超出了我的预期。过去我们常说「CSS 不是编程语言」，但现在的 CSS 已经具备了变量、条件判断、计算等编程特性。

保持学习，拥抱变化。这些新特性能让我们写出更简洁、更可维护的代码。

你最喜欢哪个 CSS 新特性？欢迎留言讨论。