本文へスキップ

no-duplicate-selectors

重複するセレクターを禁止します。

    .foo {} .bar {} .foo {}
/** ↑ ↑
* These duplicates */

このルールは2種類の重複をチェックします。

  • ルールのセレクターリスト内の単一セレクターの重複、例:`a, b, a {}`。
  • スタイルシート内のセレクターリストの重複、例:`a, b {} a, b {}`。セレクターの順序やスペースが異なっていても、重複は検出されます。例:`a d, b > c {} b>c, a d {}`。

以下の状況では、同じセレクターが繰り返されることを許可します。

  • 異なるセレクターリストで使用されている場合、例:`a {} a, b {}`。
  • 重複が異なるスタイルシートに由来すると判断された場合、例:PostCSSが読み取るソースマップを作成する方法でファイルを連結またはコンパイルした場合(例:postcss-import)。
  • 重複が異なる親ノード(例:メディアクエリの内側と外側)のルールにある場合。

このルールはネストされたセレクターを解決します。そのため、`a b {} a { & b {} }` は問題としてカウントされます。解決されたセレクターに重複が含まれるためです。

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

オプション

`true`

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

.foo,
.bar,
.foo {}
.foo {}
.bar {}
.foo {}
.foo .bar {}
.bar {}
.foo .bar {}
@media (min-width: 10px) {
.foo {}
.foo {}
}
.foo, .bar {}
.bar, .foo {}
a .foo, b + .bar {}
b+.bar,
a
.foo {}
a b {}
a {
& b {}
}

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

.foo {}
@media (min-width: 10px) {
.foo {}
}
.foo {
.foo {}
}
.foo {}
.bar {}
.foo .bar {}
.bar .foo {}
a b {}
a {
& b,
& c {}
}

オプションのセカンダリオプション

`disallowInList: true | false` (デフォルト: `false`)

このオプションは、セレクターリスト内の重複するセレクターも禁止します。

`true`の場合の例。

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

input, textarea {
border: 2px;
}
textarea {
border: 1px;
}