メインコンテンツにスキップ

declaration-block-no-duplicate-properties

宣言ブロック内でのプロパティの重複を禁止します。

a { color: pink; color: orange; }
/** ↑            ↑
 * These duplicated properties */

このルールは、変数 ($sass, @less, --custom-property) を無視します。

fixオプションを使用すると、このルールによって報告されたすべての問題を自動的に修正できます。

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

オプション​

true​

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

a { color: pink; color: orange; }
a { color: pink; background: orange; color: orange }

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

a { color: pink; }
a { color: pink; background: orange; }

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

ignore: ["consecutive-duplicates"]​

連続する重複プロパティを無視します。

それらは、古いブラウザのフォールバックとして役立つことが証明される可能性があります。

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

p {
  font-size: 16px;
  font-weight: 400;
  font-size: 1rem;
}

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

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

ignore: ["consecutive-duplicates-with-different-values"]​

値が異なる連続する重複プロパティを無視します。

重複プロパティ (フォールバック) を含めることは、CSS プロパティの古いブラウザサポートに対処するのに役立ちます。たとえば、rem が利用できない場合に px 単位を使用するなどです。

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

/* properties with the same value */
p {
  font-size: 16px;
  font-size: 16px;
  font-weight: 400;
}
/* nonconsecutive duplicates */
p {
  font-size: 16px;
  font-weight: 400;
  font-size: 1rem;
}

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

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

ignore: ["consecutive-duplicates-with-different-syntaxes"]​

値の構文 (値の型と単位) が異なる連続する重複プロパティを無視します。

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

/* properties with the same value syntax */
p {
  font-size: 16px;
  font-size: 14px;
  font-weight: 400;
}

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

p {
  font-size: 16px;
  font-size: 16rem;
  font-weight: 400;
}

ignore: ["consecutive-duplicates-with-same-prefixless-values"]​

プレフィックスを無視した場合に、同一の値を持つ連続する重複プロパティを無視します。

このオプションは、将来を見据えながら、ドラフトCSS値を処理するのに役立ちます。たとえば、fit-contentと-moz-fit-contentを使用するなどです。

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

/* nonconsecutive duplicates */
p {
  width: fit-content;
  height: 32px;
  width: -moz-fit-content;
}
/* properties with different prefixless values */
p {
  width: -moz-fit-content;
  width: 100%;
}

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

p {
  width: -moz-fit-content;
  width: fit-content;
}

ignoreProperties: ["/regex/", /regex/, "non-regex"]​

特定のプロパティの重複を無視します。

指定

["color", "/background-/"]

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

a { color: pink; background: orange; background: white; }
a { background: orange; color: pink; background: white; }

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

a { color: pink; color: orange; background-color: orange; background-color: white; }
a { color: pink; background-color: orange; color: orange; background-color: white; }