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

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

このルールは、ショートハンドで設定されるすべてのプロパティのロングハンド版を使用しており、それらの値がinitial、inheritなどのCSSワイドキーワードでない場合にのみ警告します。

このルールは、次のショートハンドプロパティを使用できる場合に警告します。

  • 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を使用できない場合がありますが、ロングハンド形式は依然として問題と見なされます。

Flexbox関連のプロパティは、ignoreShorthands: ["/flex/"]を使用して無視できます（下記参照）。

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