選擇器嵌套

Sass 中一個(gè)正在被眾多開發(fā)者濫用的功能，就是選擇器嵌套。選擇器嵌套為樣式表作者提供了一個(gè)通過局部選擇器的相互嵌套實(shí)現(xiàn)全局選擇的方法。

一般規(guī)則

比如下述Sass選擇器的嵌套：

.foo {
  .bar {
    &:hover {
      color: red;
    }
  }
}

生成的 CSS:

.foo .bar:hover {
  color: red;
}

從 Sass3.3 開始，可以在同一行中使用最近選擇器引用(&)來實(shí)現(xiàn)高級選擇器，比如：

.foo {
  &-bar {
    color: red;
  }
}

生成的 CSS:

.foo-bar {
  color: red;
}

這種方式通常被用來配合?BEM 全名方式使用，基于原選擇器（比如?.block）生成?.block__element?and?.block--modifier?選擇器。

傳說中，使用?&?能在當(dāng)前選擇器下產(chǎn)生新的選擇器，這樣代碼庫中選擇器無法控制，因?yàn)樗麄儽旧聿淮嬖?/p>

選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級別下選擇器具體的表現(xiàn)效果。CSS 最終的表現(xiàn)效果往往不是淺顯易懂的。

選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級選擇器的錯(cuò)誤率很高，這非常不值得。

為了防止此類情況，我們應(yīng)該盡可能避免選擇器嵌套。然而，顯然只有少數(shù)情況適應(yīng)這一措施。

例外

首先，在最外層選擇器中嵌套偽類和偽元素是被允許，也是受推薦的。

.foo {
  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

使用選擇器嵌套選擇偽類和偽元素不僅僅有道理的（因?yàn)樗奶幚砉δ芘c選擇器緊密相關(guān)），而且有助于保持總體的一致性。

當(dāng)然，如果使用類似?.is-active?類名來控制當(dāng)前選擇器狀態(tài)，也可以這樣使用選擇器嵌套。

.foo {
  // ...

  &.is-active {
    font-weight: bold;
  }
}

這并不是最重要的，當(dāng)一個(gè)元素的樣式在另一個(gè)容器中有其他指定的樣式時(shí)，可以使用嵌套選擇器讓他們保持在同一個(gè)地方。

.foo {
  // ...

  .no-opacity & {
    display: none;
  }
}

當(dāng)一個(gè)沒太多經(jīng)驗(yàn)的開發(fā)者，不對類似于?.no-opacity &?這樣的選擇器造成混淆。可能創(chuàng)建一個(gè)?mixin?來處理。

/// Helper mixin to provide simple API to selector nesting
/// @param {String} $selector - Selector
@mixin when-inside($selector) {
  #{$selector} & {
    @content;
  }
}

重寫剛才的示例，他看起來像這樣：

.foo {
  // ...

  @include when-inside('.no-opacity') {
    display: none;
  }
}

這所有的一切，有些是無關(guān)緊要的細(xì)節(jié)，關(guān)鍵是要保持一致性。如果你覺得完全有信心搞定選擇器嵌套，然后你就使用了選擇器嵌套?？赡氵€要確保你的整個(gè)團(tuán)隊(duì)也能搞定選擇器的嵌套。

擴(kuò)展閱讀

• Beware of Selector Nesting
• The Inception Rule
• Avoid nested selectors for more modular CSS

如果你喜歡 Sass Guidelines，請支持它

?支持 Sass Guidelines