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

更好的是，W3C規(guī)范基本穩(wěn)定，現(xiàn)在Chrome中已經(jīng)有一個工作原型。我們只需要社區(qū)稍微關(guān)注一下，引誘其他瀏覽器構(gòu)建它們的實(shí)現(xiàn)，并完成這項(xiàng)工作。

這是什么思路？

作用域?yàn)镃SS帶來了兩個關(guān)鍵點(diǎn)：

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

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

你不再需要BEM風(fēng)格的類名。

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

它是如何工作的？

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

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

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

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

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

此時，你可以使用普通的后代選擇器來實(shí)現(xiàn)這一點(diǎn)。但當(dāng)你在范圍內(nèi)應(yīng)用內(nèi)部邊界或在頁面上重疊多個范圍時，新的、以前不可能的選項(xiàng)開始出現(xiàn)。讓我們看看它們是怎么做的...

內(nèi)部范圍邊界

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

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

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

把這里的 to 關(guān)鍵字看作 直到：這個范圍是從.card到.slot定義的?，F(xiàn)在，沒有一個局限的選擇器會針對Card的.slot元素內(nèi)部的任何東西。所以你可以這樣構(gòu)建你的卡片：

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

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

@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 內(nèi)部放一個 Accordion，或者在 Accordion 內(nèi)部放一個Card，它們各自的樣式不會發(fā)生沖突。

這被俗稱為 甜甜圈范圍，因?yàn)榉秶杏幸粋€洞。（如果內(nèi)部邊界選擇器針對多個元素，它也可以有多個洞。）

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

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

近度優(yōu)先 Proximity precedence

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

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

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

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

<div class="green">
  <p>我是綠色的</p>
  <div class="blue">
    <p>我是藍(lán)色的</p>
  </div>
</div>

<div class="blue">
  <p>我是藍(lán)色的</p>
  <div class="green">
    <p>但我是綠色的</p>
  </div>
</div>

注意這目前只在Chrome中有效，需要在chrome://flags中啟用實(shí)驗(yàn)性Web平臺功能標(biāo)志。

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

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

這樣，當(dāng)兩個范圍針對同一個元素時，你可以控制哪一個優(yōu)先。而不是總是讓內(nèi)部范圍贏，你可以調(diào)整選擇器的特異性，使得更高特異性的選擇器優(yōu)先，不管它屬于哪個范圍。

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

這是一個游戲的轉(zhuǎn)折點(diǎn)

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

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

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

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

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