立即尝试 CSS 嵌套

admin web前端 暂无评论 83 浏览

早在去年 12 月，我们就写了一篇文章，详细介绍了 CSS 嵌套的三种不同选择。在其中，我们解释了选项 3、选项 4 和选项 5 之间的区别，并通过一系列示例演示了每个选项的工作原理。然后我们问了一个简单的问题：“哪个选项最适合 CSS 的未来？”

Web 开发人员非常清楚地回应了民意调查。选项 3 以压倒性优势获胜。

所以现在，Safari 和 Chrome 都实现了选项 3。两周前，也就是 1 月 25 日，CSS Nesting在Safari Technology Preview 162中默认启用。如果您有 Mac，只需下载并打开 Safari Technology Preview，编写一些嵌套的 CSS，然后体验它的工作原理！

CSS 嵌套的工作原理

假设您有一些 CSS，希望以更紧凑的方式编写。

.foo {
  color: green;
}
.foo .bar {
  font-size: 1.4rem;
}

使用 CSS 嵌套，您可以编写如下代码：

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

如果你一直在Sass中嵌套样式，你会发现这非常熟悉。

然而，与 Sass 不同的是，这种嵌套并不总是有效。由于浏览器解析引擎的限制，您必须确保嵌套选择器（.bar在上例中）始终以符号开头。如果它是类、ID、伪类、伪元素、属性选择器或任何在开头使用符号的选择器——你就成功了。例如，所有这些都会很好。以下所有嵌套选择器都以符号开头—— . # : [ * + > ~ 而不是字母：

main {
 .bar { ... }
 #baz { ...}
 :has(p) { ... }
 ::backdrop { ... }
 [lang|="zh"] { ... }
 * { ... }
 + article { ... }
 > p { ... }
 ~ main { ... }
}

然而，有一种以字母开头的选择器——嵌套元素选择器。此示例将不起作用：

main {
 article { ... }
}

该代码将失败，因为article以字母而不是符号开头。怎么会失败呢？如果你拼错了articleas ，它也会以同样的方式失败atirlce。依赖于特定选择器的嵌套 CSS 将被忽略。

对于如何处理此限制，您有多种选择。让我们先看看您可能最常使用的解决方案。&您可以简单地在元素选择器之前放置一个，如下所示：

main {
 & article { ... }
}

向浏览器发出的信号&“这是我希望这个巢外的选择器去的地方”。通过在任何元素选择器之前使用一个&，您可以成功地以符号而不是字母开始嵌套选择器。因此，它将起作用。

aside {
 & p { ... }
}

嵌套等效于：

aside p { ... }

这&对于其他用例也非常方便。

想象一下你有这个未嵌套的代码：

ul {
  padding-left: 1em;
}
.component ul {
  padding-left: 0;
}

您会注意到预期的选择器是.component ul— 其中ul第二个是。

要编写产生这种结果的嵌套规则，您可以编写：

ul {
  padding-left: 1em;
  .component & {
    padding-left: 0;
  }
}

同样，这&给了你一种方式来表达“这是我希望嵌套选择器去的地方”。

当您不希望选择器之间有空格时，它也很方便。例如：

a {
  color: blue;
  &:hover {
    color: lightblue;
  }
}

这样的代码产生与 相同的结果a:hover {。如果没有&，您会得到——注意和a :hover {之间的空格——这将无法设置您的悬停链接的样式。a:hover

但是如果你有这个未嵌套的代码怎么办？

ul {
  padding-left: 1em;
}
article ul {
  padding-left: 0;
}

您不想像这样编写嵌套版本：

ul {
  padding-left: 1em;
  & article & {
    padding-left: 0;
  }
}

为什么不？因为这实际上将以与这些未嵌套规则相同的方式运行：

ul {
  padding-left: 1em;
}
ul article ul {
  padding-left: 0;
}

中的两个无序列表ul article ul？不，那不是我们想要的。

那么，既然我们需要article &从一个符号开始，我们该怎么做呢？

我们可以这样写我们的代码：

ul {
  padding-left: 1em;
  :is(article) & {
    padding-left: 0;
  }
}

任何选择器都可以被:is()伪类包装并保持相同的特异性和含义（当它是括号内的唯一选择器时）。在 中放置一个元素选择器:is()，您会得到一个以符号开头的选择器，用于 CSS 嵌套。

总之，CSS 嵌套将像 Sass 一样工作，但有一个新规则：您必须确保嵌套选择器始终以符号开头。

目前正在进行调查，看看是否可以在不降低解析引擎速度的情况下放宽此限制。该限制很可能会被取消——无论是很快的某个时候还是未来几年。每个人都同意，没有任何此类限制，嵌套会好得多。但我们也都同意网页必须立即出现在浏览器窗口中。在渲染开始之前添加哪怕是最轻微的停顿都不是一种选择。

什么是选项？您可以根据需要构建嵌套代码。你可以嵌套不止一层——将 CSS 嵌套在已经嵌套的 CSS 中——任意多的层次。您可以根据需要将嵌套与容器查询、特征查询、媒体查询和/或级联层混合使用。任何东西都可以进入任何东西。

立即尝试 CSS 嵌套，看看您的想法。在 Safari Technology Preview 和 Chrome Dev 中测试你的代码（在翻转“Experimental Web Platform features”标志之后）以确保它产生相同的结果。这是发现错误的最佳时机——在任何浏览器推出此新功能之前。您可以在bugs.webkit.org或bugs.chromium.org报告问题。另外，请留意Safari Technology Preview 下几个版本的发行说明。每个都可能会改进我们的 CSS 嵌套实现，包括增加对 CSSOM 的支持或其他更新以匹配 CSS 工作组所做的任何潜在规范更改。

近五年来，多家公司的许多人一直致力于将嵌套引入 CSS。在关于许多不同解决方案的优缺点的长时间对话中，对语法进行了激烈的辩论。我们希望您发现结果非常有帮助。

相关博文

立即尝试 CSS 嵌套
赏
标签: