最大巢狀深度

限制巢狀深度。

a { & > b { top: 0; } }
/** ↑
 * This nesting */

此規則透過檢查規則和 at-rules 的實際「巢狀深度」與您指定的最大值來運作。巢狀深度運作方式如下

a {
  & b { /* nesting depth 1 */
    & .foo { /* nesting depth 2 */
      @media print { /* nesting depth 3 */
        & .baz { /* nesting depth 4 */
          color: pink;
        }
      }
    }
  }
}

注意

根層級 at-rules 不會包含在巢狀深度計算中，因為大多數使用者會認為根層級 at-rules 是「免費的」（因為有必要）。因此，以下 .foo 規則的巢狀深度都是 2，如果您的 max 小於或等於 2，它們將會通過

a {
  b { /* 1 */
    .foo {} /* 2 */
  }
}

@media print { /* ignored */
  a {
    b { /* 1 */
      .foo {} /* 2 */
    }
  }
}

此規則將（現在已棄用的）外掛程式 stylelint-statement-max-nesting-depth 的功能整合到 Stylelint 的核心。

message 次要選項 可以接受此規則的引數。

選項

int：允許的最大巢狀深度。

例如，使用 2

以下模式會被視為問題

a {
  & .foo { /* 1 */
    &__foo { /* 2 */
      & > .bar {} /* 3 */
    }
  }
}

a {
  @media print { /* 1 */
    & .foo { /* 2 */
      & .bar {} /* 3 */
    }
  }
}

以下模式不會被視為問題

a {
  & .foo { /* 1 */
    &__foo {} /* 2 */
  }
}

a .foo__foo .bar .baz {}

@media print {
  a {
    & .foo { /* 1 */
      &__foo {} /* 2 */
    }
  }
}

選用次要選項

ignore: ["blockless-at-rules"]

忽略僅封裝其他規則且本身沒有宣告區塊的 at-rules。

例如，使用 1

以下模式會被視為問題

由於 at-rules 有宣告區塊。

a {
  &:hover { /* 1 */
    @media (min-width: 500px) { color: pink; } /* 2 */
  }
}

a {
  @nest > b { /* 1 */
    .foo { color: pink; } /* 2 */
  }
}

以下模式不會被視為問題

由於以下所有 .foo 規則的巢狀深度都只有 1。

a {
  .foo { color: pink; } /* 1 */
}

@media print { /* ignored regardless of options */
  a {
    .foo { color: pink; } /* 1 */
  }
}

a {
  @media print { /* ignored because it's an at-rule without a declaration block of its own */
    .foo { color: pink; } /* 1 */
  }
}

ignore: ["pseudo-classes"]

忽略每個選擇器清單項目中第一個選擇器是偽類別的規則

例如，使用 1

以下模式會被視為問題

a {
  b { /* 1 */
    .c { /* 2 */
      top: 0;
    }
  }
}

a {
  &:hover { /* ignored */
    b { /* 1 */
      .c { /* 2 */
        top: 0;
      }
    }
  }
}

a {
  b { /* 1 */
    &::selection { /* 2 */
      color: #64FFDA;
    }
  }
}

a {
  b { /* 1 */
    &:hover, .c { /* 2 */
      top: 0;
    }
  }
}

以下模式不會被視為問題

由於以下所有偽類別規則的巢狀深度都只有 1。

a {
  b { /* 1 */
    &:hover { /* ignored */
      top: 0;
    }
  }
}

a {
  b { /* 1 */
    &:nest {
      &:nest-lvl2 {  /* ignored */
        top: 0;
      }
    }
  }
}

a {
  &:hover {  /* ignored */
    b { /* 1 */
      top: 0;
    }
  }
}

a {
  &:nest {  /* ignored */
    &:nest-lvl2 {  /* ignored */
      top: 0;
      b { /* 1 */
        bottom: 0;
      }
    }
  }
}

a {
  b { /* 1 */
    &:hover, &:focus {  /* ignored */
      top: 0;
    }
  }
}

ignoreAtRules: ["/regex/", /regex/, "string"]

忽略指定的 at 規則。

例如，使用 1 和給定的

["/^--my-/", "media"]

以下模式不會被視為問題

a {
  @media print {      /* 1 */
    b {               /* 2 */
      c { top: 0; }   /* 3 */
    }
  }
}

a {
  b {                 /* 1 */
    @media print {    /* 2 */
      c { top: 0; }   /* 3 */
    }
  }
}

a {
  @--my-at-rule print {  /* 1 */
    b {                /* 2 */
      c { top: 0; }    /* 3 */
    }
  }
}

a {
  @--my-other-at-rule print {  /* 1 */
    b {                      /* 2 */
      c { top: 0; }          /* 3 */
    }
  }
}

以下模式會被視為問題

a {
  @import print {       /* 1 */
    b { top: 0; }       /* 2 */
  }
}

a {
  @--not-my-at-rule print {   /* 1 */
    b { top: 0; }       /* 2 */
  }
}

ignorePseudoClasses: ["/regex/", /regex/, "string"]

忽略指定的偽類別。

例如，使用 1 和給定的

["hover", "^focus-"]

以下模式不會被視為問題

a {
  &:hover {   /* ignored */
    b {      /* 1 */
      top: 0;
    }
  }
}

a {
  &:hover, &:active { /* ignored */
    b {              /* 1 */
      top: 0;
    }
  }
}

以下模式會被視為問題

a {
  &:visited { /* 1 */
    b {      /* 2 */
      top: 0;
    }
  }
}

a {
  &:hover, &:visited { /* 1 */
    b {               /* 2 */
      top: 0;
    }
  }
}

ignoreRules: ["/regex/", /regex/, "string"]

忽略與指定選擇器相符的規則。

例如，使用 1 和給定的

[".my-selector", "/^.ignored-sel/"]

以下模式不會被視為問題

a {
  .my-selector {   /* ignored */
    b {      /* 1 */
      top: 0;
    }
  }
}

a {
  .my-selector, .ignored-selector { /* ignored */
    b {              /* 1 */
      top: 0;
    }
  }
}

以下模式會被視為問題

a {
  .not-ignored-selector { /* 1 */
    b {      /* 2 */
      top: 0;
    }
  }
}

a {
  .my-selector, .not-ignored-selector { /* 1 */
    b {               /* 2 */
      top: 0;
    }
  }
}