Skip to content

Files

Latest commit

 

History

History
65 lines (49 loc) · 1.34 KB

declaration-block-no-shorthand-property-overrides.md

File metadata and controls

65 lines (49 loc) · 1.34 KB

Pattern: Shorthand property overrides related longhand

Issue: -

Description

Disallow shorthand properties that override related longhand properties. In almost every case, this is just an authorial oversight. For more about this behavior, see MDN's documentation of shorthand properties.

Examples

The following patterns are considered violations:

a { background-repeat: repeat; background: green; }
/**                            ↑
 * This overrides the longhand property before it */
a {
  padding-left: 10px;
  padding: 20px;
}
a {
  transition-property: opacity;
  transition: opacity 1s linear;
}
a {
  -webkit-transition-property: opacity;
  -webkit-transition: opacity 1s linear;
}
a {
  border-top-width: 1px;
  top: 0;
  bottom: 3px;
  border: 2px solid blue;
}

The following patterns are not considered violations:

a { padding: 10px; padding-left: 20px; }
a { transition-property: opacity; } a { transition: opacity 1s linear; }
a { transition-property: opacity; -webkit-transition: opacity 1s linear; }

Further Reading