Skip to main content

declaration-block-no-redundant-longhand-properties

禁止声明块中存在多余的普通属性。

¥Disallow redundant longhand properties within declaration-block.

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

 *  These longhand properties */

上例中的普通属性可以更简洁地写为：

¥The longhand properties in the example above can be more concisely written as:

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

仅当你使用了速记将设置的所有属性的等效速记形式，并且它们的值不是 CSS 范围内的关键字（如 initial、inherit 等）时，此规则才会出现错误。

¥This rule will only complain if you've used the longhand equivalent of all the properties that the shorthand will set and if their values are not CSS-wide keywords like initial, inherit etc.

当可以使用以下简写属性时，此规则会诉说：

¥This rule complains when the following shorthand properties can be used:

  • 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

  • font-variant

  • 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

[!WARNING] 请注意，如果属性可以根据规范简写，则它们被视为冗余，无论任何单个浏览器的行为如何。例如，由于 Internet Explorer 实现了 Flexbox，可能无法使用简写属性 flex，但普通形式仍然被认为是一个问题。

¥[!WARNING] Please note that properties are considered to be redundant if they may be written shorthand according to the specification, regardless of the behavior of any individual browser. For example, due to Internet Explorer's implementation of Flexbox, it may not be possible to use the shorthand property flex, but the longhand form is still considered a problem.

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

¥Flexbox-related properties can be ignored using ignoreShorthands: ["/flex/"] (see below).

fix 选项 可以自动修复此规则报告的大部分问题。

¥The fix option can automatically fix most of the problems reported by this rule.

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

¥The message secondary option can accept the arguments of this rule.

选项​

¥Options

true​

以下模式被视为问题：

¥The following patterns are considered problems:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

可选的辅助选项​

¥Optional secondary options

ignoreLonghands: ["array", "of", "properties"]​

鉴于：

¥Given:

["text-decoration-thickness", "background-size", "background-origin", "background-clip"]

以下模式被视为问题：

¥The following patterns are considered problems:

a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: purple;
}
a {
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-color: transparent;
  background-image: none;
  background-size: contain;
  background-origin: border-box;
  background-clip: text;
}

以下模式不被视为问题：

¥The following patterns are not considered problems:

a {
  text-decoration: underline solid purple;
  text-decoration-thickness: 1px;
}
a {
  background: none 0% 0% repeat scroll transparent;
  background-size: contain;
  background-origin: border-box;
  background-clip: text;
}

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

鉴于：

¥Given:

["padding", "/border/"]

以下模式不被视为问题：

¥The following patterns are not considered problems:

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