CSS 嵌套：原生 CSS 中的 Sass 类语法，面向全球开发者

多年来，Web 开发者一直依赖 Sass、Less 和 Stylus 等 CSS 预处理器来克服标准 CSS 的局限性。这些预处理器最受欢迎的功能之一是嵌套，它允许您在其他 CSS 规则中编写 CSS 规则，从而创建一个更直观、更有条理的结构。现在，得益于 CSS 标准的演进，原生 CSS 嵌套终于问世，它提供了一种强大的替代方案，无需借助外部工具。

什么是 CSS 嵌套？

CSS 嵌套是一项允许您将 CSS 规则嵌套在其他 CSS 规则中的功能。这意味着您可以在父选择器内定位特定元素及其状态，使您的 CSS 更简洁、更易于阅读。它模仿了 HTML 的层级结构，提高了可维护性并减少了冗余。假设您有一个导航菜单。传统上，您可能会这样编写 CSS：


.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.navbar a {
  color: #333;
  text-decoration: none;
}

.navbar a:hover {
  color: #007bff;
}

使用 CSS 嵌套，您可以用一种更结构化的方法达到同样的效果：


.navbar {
  background-color: #f0f0f0;
  padding: 10px;

  a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #007bff;
    }
  }
}

请注意 a 和 a:hover 规则是如何嵌套在 .navbar 规则中的。这清楚地表明这些样式仅适用于导航栏内的锚标签。& 符号指向父选择器（.navbar），对于像 :hover 这样的伪类至关重要。这种方法可以很好地应用于各种项目，从简单的网站到供全球用户使用的复杂 Web 应用程序。

使用原生 CSS 嵌套的好处

原生 CSS 嵌套的引入为 Web 开发者带来了诸多好处：

提高可读性：嵌套反映了 HTML 结构，使得理解不同元素及其样式之间的关系变得更加容易。这对于大型项目尤其有价值，因为在这些项目中浏览复杂的 CSS 文件可能具有挑战性。想象一个具有多个嵌套元素的复杂组件。通过嵌套，所有与该组件相关的样式都被组合在一起。
增强可维护性：通过以层级方式组织 CSS 规则，嵌套使得修改和更新样式变得更加容易。对父选择器的更改会自动级联到其嵌套的子元素，从而降低引入意外副作用的风险。如果您需要更改导航栏的背景颜色，您只需修改 .navbar 规则，其所有嵌套样式将保持一致。
减少代码重复：嵌套消除了重复父选择器的需要，从而使代码更简洁、更精炼。这减小了文件大小并提高了性能，特别是对于拥有大量 CSS 规则的大型网站。考虑一个场景，您需要为特定容器内的多个元素设置样式。您无需为每个规则重复指定容器选择器，而是可以将规则嵌套在容器选择器内。
简化 CSS 架构：嵌套鼓励采用更模块化和基于组件的方法来构建 CSS 架构。您可以将与特定组件相关的样式分组到一个嵌套块中，从而更容易管理和重用代码。这在与分布在不同时区的团队合作时尤其有益。
无需预处理器依赖：原生 CSS 嵌套消除了对 Sass、Less 或 Stylus 等 CSS 预处理器的需求。这简化了您的开发工作流程，并减少了管理外部依赖项的开销。这使得新开发者更容易为项目做出贡献，而无需学习新的预处理器语法。

如何使用 CSS 嵌套

CSS 嵌套使用了一种直观的语法，它建立在现有 CSS 约定的基础上。以下是关键概念的分解：

基本嵌套

您可以将任何 CSS 规则嵌套在另一个 CSS 规则中。例如：


.container {
  width: 80%;
  margin: 0 auto;

  h2 {
    font-size: 2em;
    color: #333;
  }
}

此代码为 .container 元素内的所有 h2 元素设置样式。

使用 `&` 选择器

& 选择器代表父选择器。它对于伪类、伪元素和组合器至关重要。例如：


button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #0056b3;
  }
}

在此示例中，&:hover 在按钮悬停时应用样式，而 &::after 在按钮后添加一个伪元素。请注意使用“&”来引用父选择器的重要性。

与媒体查询嵌套

您还可以在 CSS 规则中嵌套媒体查询以创建响应式设计：


.card {
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;

  @media (max-width: 768px) {
    width: 100%;
    margin: 10px 0;
  }
}

此代码在屏幕宽度小于 768px 时调整 .card 元素的宽度和边距。这是一个强大的工具，用于创建能够适应全球用户使用的不同屏幕尺寸的网站。

与组合器嵌套

CSS 组合器（例如 >、+、~）可以在嵌套规则中使用，以定位元素之间的特定关系：


.article {
  h2 {
    margin-bottom: 10px;
  }

  > p {
    line-height: 1.5;
  }

  + .sidebar {
    margin-top: 20px;
  }
}

在此示例中，> p 定位 .article 元素的直接子段落，而 + .sidebar 定位紧随其后且类名为 .sidebar 的同级元素。

浏览器支持和 Polyfills

截至 2023 年末，CSS 嵌套已获得广泛关注，并得到包括 Chrome、Firefox、Safari 和 Edge 在内的大多数现代浏览器的支持。然而，查看像 Can I use 这样的资源上的当前浏览器支持矩阵至关重要，以确保为您的目标受众提供兼容性。对于不原生支持 CSS 嵌套的旧版浏览器，您可以使用 polyfill，例如 PostCSS Nested 插件，将您的嵌套 CSS 转换为兼容代码。

CSS 嵌套的最佳实践

虽然 CSS 嵌套提供了许多优势，但审慎使用它至关重要，以避免创建过于复杂或难以维护的代码。以下是一些应遵循的最佳实践：

保持浅层嵌套：避免深度嵌套的规则，因为它们会使您的 CSS 更难阅读和调试。目标是最大嵌套深度为 2-3 级。
为相关样式使用嵌套：仅嵌套与父选择器在逻辑上相关的样式。不要仅仅为了将不相关的样式分组而使用嵌套。
注意特异性：嵌套会增加 CSS 规则的特异性，可能导致意外行为。请注意特异性规则并明智地使用它们。
考虑性能：虽然嵌套通常可以改善代码组织，但过多的嵌套可能会对性能产生负面影响。请有策略地使用嵌套并彻底测试您的代码。
遵循一致的命名约定：为您的 CSS 类和选择器采用一致的命名约定，以提高可读性和可维护性。这有助于不同地区的开发者快速理解代码库。

CSS 嵌套实战示例

让我们探讨一些关于如何使用 CSS 嵌套来为各种 UI 组件设置样式的实际示例：

按钮


.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &.primary {
    background-color: #007bff;
    color: #fff;

    &:hover {
      background-color: #0056b3;
    }
  }

  &.secondary {
    background-color: #f0f0f0;
    color: #333;

    &:hover {
      background-color: #e0e0e0;
    }
  }
}

此代码定义了一个通用 .button 类的样式，然后使用嵌套为主要和次要按钮创建变体。

表单


.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .error-message {
    color: red;
    margin-top: 5px;
  }
}

此代码为表单中的表单组、标签、输入字段和错误消息设置样式。

导航菜单


.nav {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    margin-right: 20px;

    a {
      text-decoration: none;
      color: #333;

      &:hover {
        color: #007bff;
      }
    }
  }
}

此代码为导航菜单、列表项和菜单内的锚标签设置样式。

CSS 嵌套与 CSS 预处理器

对于多年来一直依赖 CSS 预处理器的 Web 开发者来说，CSS 嵌套是一个改变游戏规则的功能。虽然预处理器提供了广泛的功能，包括变量、mixin 和函数，但原生 CSS 嵌套直接在浏览器中提供了这些功能的一个重要子集。以下是一个比较：

功能	原生 CSS 嵌套	CSS 预处理器（例如 Sass）
嵌套	是	是
变量	自定义属性（CSS 变量）	是
Mixin	否（通过 `@property` 和 Houdini API 功能有限）	是
函数	否（通过 Houdini API 功能有限）	是
运算符	否	是
浏览器支持	现代浏览器	需要编译
依赖	无	需要外部工具

如您所见，对于基本的嵌套需求，原生 CSS 嵌套为预处理器提供了一个强大的替代方案。虽然预处理器仍然提供像 mixin 和函数这样的高级功能，但差距正在缩小。CSS 自定义属性（变量）也提供了一种在样式表中重用值的方法。

CSS 嵌套的未来及展望

CSS 嵌套只是 CSS 世界中众多激动人心的发展之一。随着 CSS 的不断发展，我们可以期待看到更多强大的功能，以简化 Web 开发并提高代码质量。像 Houdini API 这样的技术正在为更高级的样式功能铺平道路，包括具有更丰富类型系统的自定义属性、自定义动画和自定义布局算法。拥抱这些新技术将使开发者能够为全球用户创建更具吸引力和交互性的 Web 体验。CSS 工作组正在不断探索改进该语言并满足 Web 开发者需求的新方法。

结论

CSS 嵌套是原生 CSS 的一个重要进步，它将类似 Sass 的语法的好处带给了更广泛的受众。通过提高代码可读性、增强可维护性和减少代码重复，CSS 嵌套使开发者能够编写更清晰、更高效、更具可扩展性的 CSS。随着浏览器支持的不断增长，CSS 嵌套有望成为每位 Web 开发者工具库中必不可少的工具。因此，拥抱 CSS 嵌套的力量，在您的 Web 开发项目中解锁新的创造力和生产力水平吧！这项新功能将使不同背景和技能水平的开发者能够编写更易于维护和理解的 CSS，从而改善全球范围内的协作并缩短开发时间。CSS 的未来是光明的，而 CSS 嵌套正是这一进步的光辉典范。