selector-max-class

セレクター内のクラス数を制限します。

div .foo.bar[data-val] > a.baz {}
/*  ↑   ↑                 ↑
    ↑   ↑                 ↑
    1   2                 3  -- this selector contains three classes */

このルールは、セレクター内のクラス数をカウントする前に、ネストされたセレクターを解決します。セレクターリスト内の各セレクターは個別に評価されます。

:not()擬似クラスも個別に評価されます。このルールは、引数を独立したセレクターであるかのように処理し、その結果は全体のセレクターの合計にはカウントされません。

message セカンダリオプションはこのルールの引数を受け入れることができます。

オプション

int: 許可される最大クラス数。

例えば、2の場合

次のパターンは問題とみなされます

.foo.bar.baz {}

.foo .bar {
  & > .baz {}
}

次のパターンは問題とみなされません

div {}

.foo .bar {}

.foo.bar,
.lorem.ipsum {} /* each selector in a selector list is evaluated separately */

.foo .bar :not(.lorem.ipsum) {} /* `.lorem.ipsum` is inside `:not()`, so it is evaluated separately */