幾年前，消失的作用域 CSS，如今它回來了，而且比以前的版本要好得多。

更好的是，W3C規范基本穩定，現在Chrome中已經有一個工作原型。我們只需要社區稍微關注一下，引誘其他瀏覽器構建它們的實現，并完成這項工作。

這是什么思路？

作用域為CSS帶來了兩個關鍵點：

• 更好地控制哪些選擇器針對哪些元素（即更好地操作級聯）。
• 一組樣式可以基于DOM中的位置覆蓋另一組樣式。

局部樣式允許你在頁面上的單個組件內包含一組樣式。你可以使用.title選擇器，它只在Card組件內工作，并使用另一個.title選擇器，它只在 Accordion 中工作。你可以阻止一個組件的選擇器針對子組件中的元素，或者如果需要，也可以允許它們到達。

你不再需要BEM風格的類名。

此外，近度在級聯中變成了一等公民。如果兩個組件針對同一個元素（具有相同的特異性），內部組件的樣式將覆蓋外部組件的樣式。

它是如何工作的？

一切都始于@scope規則和一個選擇器，如下：

@scope (.card) {
  /* 將以下樣式局限于`.card`內部 */
  :scope {
    padding: 1rem;
    background-color: white;
  }

  .title {
    font-size: 1.2rem;
    font-family: Georgia, serif;
  }
}

這些樣式都限制在.card元素中。:scope是一個特殊的偽類，針對.card元素本身，.title針對標題內部的標題。

@scope規則本身不增加這些選擇器的特異性，所以它們都是(0, 1, 0)。是的，特異性仍然很重要，但這是好事??。稍后再說。

此時，你可以使用普通的后代選擇器來實現這一點。但當你在范圍內應用內部邊界或在頁面上重疊多個范圍時，新的、以前不可能的選項開始出現。讓我們看看它們是怎么做的...

內部范圍邊界

假設你預計將其他組件放入你的Cards中，所以你不希望.title 選擇器針對除屬于Card的那個標題之外的任何東西。為此，你在范圍上設置了一個內部邊界，如下：

@scope (.card) to (.slot) {
  /* 限定的樣式只在`.card`內部，但不在`.slot`內部 */
  :scope {
    padding: 1rem;
    background-color: white;
  }

  .title {
    font-size: 1.2rem;
    font-family: Georgia, serif;
  }
}

把這里的 to 關鍵字看作 直到：這個范圍是從.card到.slot定義的。現在，沒有一個局限的選擇器會針對Card的.slot元素內部的任何東西。所以你可以這樣構建你的卡片：

<div class="card">
  <h3 class="title">Moon lander</h3>
  <div class="slot">
    <!-- 局部樣式不會針對這里的任何東西！ -->
  </div>
</div>

范圍的影響受到了限制，使其不針對.slot內的任何東西。這樣，你可以嵌套兩個范圍，每個范圍都可以使用相同的通用標題類名，而不會發生沖突。實際上，你可能根本不再需要類名了：

@scope (.card) to (.slot) {
  h3 {
    font-size: 1.2rem;
    font-family: Georgia, serif;
  }
}

@scope (.accordion) to (.slot) {
  h3 {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
}

你可以在 Card 內部放一個 Accordion，或者在 Accordion 內部放一個Card，它們各自的樣式不會發生沖突。

這被俗稱為 甜甜圈范圍，因為范圍中有一個洞。（如果內部邊界選擇器針對多個元素，它也可以有多個洞。）

Miriam Suzanne 建議使用這種方式是持續使用data-*屬性和屬性選擇器作為你的范圍：

@scope ([data-scope='media']) to (:scope [data-scope]) {
  /* 限定的樣式在這里 */
}

近度優先 Proximity precedence

另一個方面是近度的概念：來自內部范圍的樣式將覆蓋來自外部范圍的樣式。想象你有這樣兩個范圍：

@scope (.green) {
  p {
    color: green;
  }
}

@scope (.blue) {
  p {
    color: blue;
  }
}

將以下內容應用于HTML。這里沒有內部范圍約束，所以兩個p選擇器都針對這里的內部段落。在這種情況下，內部范圍總是優先：

<div class="green">
  <p>我是綠色的</p>
  <div class="blue">
    <p>我是藍色的</p>
  </div>
</div>

<div class="blue">
  <p>我是藍色的</p>
  <div class="green">
    <p>但我是綠色的</p>
  </div>
</div>

注意這目前只在Chrome中有效，需要在chrome://flags中啟用實驗性Web平臺功能標志。

你可以在DevTools中檢查，看到每個范圍是如何根據其最近的接近性來覆蓋另一個的：

這里的問題是，選擇器的特異性仍然是優先的，所以如果外部范圍以比內部更高的特異性針對一個元素，外部范圍的樣式將會應用。

這樣，當兩個范圍針對同一個元素時，你可以控制哪一個優先。而不是總是讓內部范圍贏，你可以調整選擇器的特異性，使得更高特異性的選擇器優先，不管它屬于哪個范圍。

當你不希望這種行為時，你有幾種方法可以防止它。你可以使用級聯層來使一個組件——或者一個組件的某些部分——優先于另一個。或者，你可以應用一個內部范圍約束到外部范圍，以防止它發生。在嘗試了一段時間的范圍后，我覺得這是一個正確的平衡。它給了你最大的控制權，而不是讓你受制于級聯的一套嚴格的規則。

這是一個游戲的轉折點

如果你開發過大型應用，并且不得不依賴 CSS-in-JS 庫來防止類名沖突，作用域 CSS是個很好的選擇。如果你使用了復雜的BEM類名系統，并努力使所有的選擇器特異性保持一致，想想這可以帶來的自由。如果你曾經使用過shadow DOM來隔離樣式，但覺得它過于重手，這是一個更好的方法（當然，shadow DOM仍然有它的用途）。

以下只是我會嘗試的一些想法：

• 定義一個組件的部分，有一個內部邊界，部分沒有，所以它的“chrome”樣式（即包裝器、切換按鈕等）不影響其子內容，但它可以影響文本內的外觀。
• 在不同的級聯層上定義一個組件的部分，這樣它可以影響其包含的范圍，但仍然容易在更高的層次上覆蓋。
• 嵌套的顏色主題。
• 在博客文章中更容易地防止樣式沖突。
• 容器查詢—我們能通過混合和匹配來提出什么？

我們需要更多的瀏覽器支持

到目前為止，Chrome 似乎已經支持了—他們已經有了第一個工作原型幾個月了。它可能稍微落后于規范的最新變化，所以如果你玩一下，要留意一些即將到來的小變化。