跳至主要內容

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; }