层叠层

CSS 中将出现一项新功能：@layer。

这 来自 Miriam Suzanne，她一直在努力影响重要的 CSS 新功能。 我一直在听说这些，但突然间它就在实验性浏览器中发布了。

把这交给 Bramus 来深入研究，他写了一篇关于这个功能的精彩文章。

随着层叠层出现，我们将拥有更多工具来控制层叠。 层叠层的真正强大之处在于它在层叠中的独特位置：在选择器特异性和出现顺序之前。 正因为如此，我们不必担心其他层中使用的 CSS 的选择器特异性，也不必担心我们将 CSS 加载到这些层的顺序 - 这对于大型团队或加载第三方 CSS 时将非常有用。

Bramus Van Damme，“CSS 的未来：层叠层 (CSS @layer)“

强调部分由我添加。

这就是关键所在：这是一项影响哪些选择器获胜的新功能。 这将需要我们重新思考 CSS 的思路，因为层叠层是决定哪些样式实际应用的全新（且强大的）部分。

我之所以说它强大，是因为“更高”的层可以在层中使用更弱的选择器，依然可以轻松击败传统上更强的选择器。

/* First layer */
@layer base-layer {
  body#foo {
    background: tan;
  }
}
/* Higher layer, so this wins, despite selector strength */
@layer theme-layer {
  body.foo {
    background: #eee;
  }
}

/* Careful! Unlayered styles are more powerful than layers, even if the selector is weaker */
body {
  background: red;
}

由于底部 CSS 根本不在层中，因此它会获胜，即使选择器更弱。

而且您不仅限于一个层。 您可以根据自己的需要定义和使用它们。

@layer reset;     /* Create 1st layer named “reset” */
@layer base;      /* Create 2nd layer named “base” */
@layer theme;     /* Create 3rd layer named “theme” */
@layer utilities; /* Create 4th layer named “utilities” */
/* Or, @layer reset, base, theme, utilities; */


@layer reset { /* Append to layer named “reset” */
  /* ... */
}

@layer theme { /* Append to layer named “theme” */
  /* ... */
}

@layer base { /* Append to layer named “base” */
  /* ... */
}

@layer theme { /* Append to layer named “theme” */
  /* ... */
}

真的令人难以置信。

我们将如何使用它？

我想知道一个常见的模式是否会变成……

1. 对所有内容进行分层，以便优先级级别非常清晰。 也许只允许未分层的 CSS 用于超级强大的覆盖，但理想情况下，即使是这种做法也应该作为高级层进行。
2. 重置作为最低层。
3. 第三方内容作为中间层。
4. 团队编写的任何内容作为最高层。

您不必担心在层之间留出空间（就像您在使用z-index时可能会做的那样），因为您可以随时调整它，而无需附加任何数字。

时间会证明一切。

调试

我希望 DevTools 能非常清楚地表达层，因为当我们看到看起来更弱的选择器由于层级位置而获胜时，一段时间内肯定会有不少挠头现象。

浏览器支持

看起来 Caniuse 在这里很积极！

更新

这些功能非常新（截至撰写本文时），因此预计会出现波动性。 看起来在 2021 年 10 月 6 日，决定未分层的样式实际上是最强的样式，而不是最弱的样式。 我已尝试更新文章以显示这一点。