CSS Nesting 实战指南：原生支持层级嵌套，从此告别 SCSS？

🌿 CSS Nesting 实战指南：原生支持层级嵌套，从此告别 SCSS？

你是否厌倦了 class 命名重复？是否被 SCSS 编译与构建卡住？CSS Nesting 让你直接在浏览器中用上类似 SCSS 的嵌套语法，构建更优雅的样式体系，无需构建工具即可享受结构式编写体验。

🧠 什么是 CSS Nesting？

CSS Nesting（嵌套规则）是 CSS 原生规范的一部分，它允许你在一个选择器规则内，嵌套定义其子规则，更接近 HTML 结构本身的样式逻辑表达。

类似 SCSS 中的写法：

.card {
  background: white;

  h2 {
    color: black;
  }

  &:hover {
    background: #f4f4f4;
  }
}

在 CSS Nesting 中，也可以这样写（略有区别，语法更严谨）。

✅ CSS Nesting 的原生写法

.card {
  background: white;

  & h2 {
    color: black;
  }

  &:hover {
    background: #f4f4f4;
  }
}

📌 说明：

• 使用 @nest 明确嵌套语义；
• & 代表父选择器；
• 所有嵌套写法必须包含 &，否则会被视为全局选择器。

🔧 语法快速对照

🧪 实战一：构建结构清晰的卡片组件样式

.card {
  padding: 16px;
  border-radius: 8px;
  background: white;

  & .title {
    font-size: 20px;
    font-weight: bold;
  }

  & .desc {
    color: #666;
    font-size: 14px;
  }

  & .actions {
    margin-top: 16px;

    & button {
      padding: 8px 12px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 4px;
    }
  }
}

✅ 结构更清晰，避免样式散落，维护更高效。

💡 优势总结

🌐 浏览器支持情况（2025）

📌 可通过 @supports 检查：

@supports (selector(&)) {
  /* 支持嵌套写法 */
}

⚠️ 注意事项

🧩 推荐搭配使用的特性

✨ 一句话总结：

CSS Nesting 是原生样式组织的革命，让你不用预处理器也能拥有结构化、模块化、高可读性的样式系统，是组件化开发的理想选择！

👍 如果你觉得这篇文章有帮助，欢迎点赞、关注、收藏，后续我会努力更新更多的前端样式方面的实用技巧。