跳到主要內容

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 等）時才會提出抱怨。

當可以使用下列縮寫屬性時，此規則會提出抱怨

  • 動畫
  • 背景
  • 邊框
  • 邊框區塊
  • 邊框區塊結尾
  • 邊框區塊開頭
  • 下邊框
  • 邊框顏色
  • 邊框圖片
  • 內嵌邊框
  • 內嵌邊框結尾
  • 內嵌邊框開頭
  • 左邊框
  • 邊框半徑
  • 右邊框
  • 邊框樣式
  • 上邊框
  • 邊框寬度
  • 欄位規則
  • 欄位
  • 彈性
  • 彈性流
  • 字型
  • 字型合成
  • 間隙
  • 網格
  • 網格區域
  • 網格欄位
  • 網格間隙
  • 網格列
  • 網格範本
  • 插入
  • 區塊插入
  • 內嵌插入
  • 清單樣式
  • 外框
  • 區塊外框
  • 內嵌外框
  • 遮罩
  • 輪廓
  • 溢位
  • 過捲動行為
  • 內距
  • 區塊內距
  • 內嵌內距
  • 放置內容
  • 放置項目
  • 放置自身
  • 捲動外框
  • 區塊捲動外框
  • 內嵌捲動外框
  • 捲動內距
  • 區塊捲動內距
  • 內嵌捲動內距
  • 文字裝飾
  • 文字強調
  • 轉場
警告

請注意，如果屬性可以根據規範寫成簡寫，則會被視為是多餘的，無論個別瀏覽器的行為為何。例如，由於 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;
}