跳至主要内容

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