跳至主要内容

declaration-block-no-redundant-longhand-properties

禁止在声明块中使用多余的长属性。

  a {
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px; }
/** ↑
 *  These longhand properties */

上面示例中的长属性可以更简洁地写成

a {
  padding: 1px 2px 3px 4px;
}

此规则仅在您使用了简写属性设置的所有属性的等效长属性，并且它们的属性值不是 CSS 全局关键字（如 initial、inherit 等）时才会报错。

当可以使用以下简写属性时，此规则会报错

  • animation
  • background
  • border
  • border-block
  • border-block-end
  • border-block-start
  • border-bottom
  • border-color
  • border-image
  • border-inline
  • border-inline-end
  • border-inline-start
  • border-left
  • border-radius
  • border-right
  • border-style
  • border-top
  • border-width
  • column-rule
  • columns
  • flex
  • flex-flow
  • font
  • font-synthesis
  • gap
  • grid
  • grid-area
  • grid-column
  • grid-gap
  • grid-row
  • grid-template
  • inset
  • inset-block
  • inset-inline
  • list-style
  • margin
  • margin-block
  • margin-inline
  • mask
  • outline
  • overflow
  • overscroll-behavior
  • padding
  • padding-block
  • padding-inline
  • place-content
  • place-items
  • place-self
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-inline
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-inline
  • text-decoration
  • text-emphasis
  • transition
警告

请注意，如果属性可以根据规范写成简写形式，则无论任何单个浏览器如何表现，这些属性都被认为是多余的。例如，由于 Internet Explorer 对 Flexbox 的实现，可能无法使用简写属性 flex，但长属性形式仍然被认为是问题。

可以使用 ignoreShorthands: ["/flex/"] 忽略与 Flexbox 相关的属性（见下文）。

该 fix 选项 可以自动修复此规则报告的大多数问题。

该 message 次要选项 可以接受此规则的参数。

选项​

true​

以下模式被认为是问题

a {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}
a {
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  font-stretch: normal;
  font-size: 14px;
  line-height: 1.2;
  font-family: serif;
}
a {
  -webkit-transition-property: top;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
}

以下模式不被认为是问题

a {
  margin: 1px 2px 3px 4px;
}
a {
  font: italic normal bold normal 14px/1.2 serif;
}
a {
  -webkit-transition: top 2s ease 0.5s;
}
a {
  margin-top: 1px;
  margin-right: 2px;
}
a {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
}

可选的次要选项​

ignoreShorthands: ["/regex/", /regex/, "string"]​

给定

["padding", "/border/"]

以下模式不被认为是问题

a {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 10px;
}
a {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
}
a {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
}
a {
  border-top-color: green;
  border-top-style: double;
  border-top-width: 7px;
}