noShorthandPropertyOverrides (CSS)

Language CSS

Summary

Rule available since: v1.8.2
Diagnostic Category: lint/suspicious/noShorthandPropertyOverrides
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as declaration-block-no-shorthand-property-overrides

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "suspicious": {
5
        "noShorthandPropertyOverrides": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow shorthand properties that override earlier, more specific properties.

A shorthand property sets several related properties at once. For example, padding sets all four sides, including padding-left. Writing padding after padding-left resets the earlier left-side value. Put the shorthand first or use only the specific properties.

See MDN’s shorthand property guide.

SCSS limitations

Declarations are compared within each authored declaration block. The rule does not expand mixins or includes, so overrides introduced only after SCSS expansion are not reported.

Examples

Invalid

1
a { padding-left: 10px; padding: 20px; }

code-block.css:1:25 lint/suspicious/noShorthandPropertyOverrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This shorthand property padding overrides the earlier padding-left declaration.
  
  > 1 │ a { padding-left: 10px; padding: 20px; }
      │                         ^^^^^^^
    2 │ 
  
  ℹ Shorthand properties reset related longhand properties, which can overwrite earlier values unexpectedly.
  
  ℹ Declare the shorthand first, or use longhand properties consistently so later declarations stay explicit.

1
@keyframes fade {
2
  from { margin-left: 1px; margin: 0; }
3
}

code-block.css:2:28 lint/suspicious/noShorthandPropertyOverrides ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This shorthand property margin overrides the earlier margin-left declaration.
  
    1 │ @keyframes fade {
  > 2 │   from { margin-left: 1px; margin: 0; }
      │                            ^^^^^^
    3 │ }
    4 │ 
  
  ℹ Shorthand properties reset related longhand properties, which can overwrite earlier values unexpectedly.
  
  ℹ Declare the shorthand first, or use longhand properties consistently so later declarations stay explicit.

Valid

1
a { padding: 10px; padding-left: 20px; }

1
a { transition-property: opacity; } a { transition: opacity 1s linear; }

1
body { font-size: var(--font-size); }
2
@supports (font: -apple-system-body) {
3
  body { font-size: -apple-system-body; }
4
}