CSS 范围作用域的早期探索

现在已经有 CSS 范围作用域的工作草案规范 了。除了一个奇怪的时期，<style scoped> 曾经被发布，随后又从规范（和浏览器）中删除，这是范围作用域提案取得的最远进展（Level 1 规范 一直没有得到任何进展）。

这个提案 来自 Miriam Suzanne。

基础知识

<div class="media">
  <img alt="Proper alt." src="...">
  <div class="content">
    <p>...</p>
  </div>
</div>

如果我把这段 HTML 代码视为一个“组件”，那么能够为其编写非常明确地只针对它的样式会非常不错。这就是 @scope 的作用，所以……

@scope (.media) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}

我喜欢它的地方在于

1. 这段 CSS 代码非常明确地只针对这个媒体组件。它的阅读方式和维护方式都体现了这一点。
2. 我不需要为 <img> 想出一个名称和类。我在那里应用样式，而不会“泄漏”到其他图像。

但是等等，这难道不就像在选择器前面加上父级类一样吗？

它有点像……比如我们也可以这样写

.media {
}
.media img {
}
.media .content {
}

现在我们已经将内容限制在媒体组件内部了。这有点重复，但是随着 原生 CSS 嵌套 的到来，它就变成了这样

.media {
  & img {
  }
  & .content {
  }
}

所以是的，我认为嵌套可以处理一些基本的范围作用域类型，但是这个新的范围作用域提案有一些非常独特的东西。

一个独特的特性是 “甜甜圈范围作用域”，这意味着我可以在想要的地方停止范围作用域。也许我想让我的范围作用域在特定的类处停止

@scope (.media) to (.content) {
  p { }
}

现在我可以编写样式，而不会干扰我不希望它们干扰的区域。也许

<div class="media">
  <img alt="Proper alt." src="...">
  <p>This is stylable in scope.</p>
  <div class="content">
    <p>This is NOT styleable in scope.</p>
  </div>
</div>

但这并不是这个新规范解决的唯一独特问题。我认为 Miriam 提出的“最近祖先”情况也许是最有趣的事情。 我将带您前往博文 阅读关于此内容的信息——我们还没有一个好的工具来解决这个问题，这真是太奇怪了。

这里有很多东西需要你思考，尤其是在你想到更复杂的情况时，比如多个重叠的范围作用域以及嵌套语法如何与范围作用域交互。幸运的是，Miriam 正在非常清晰地记录这些内容。