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

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noShorthandPropertyOverrides": "error"
      }
    }
  }
}

Description

Disallow shorthand properties that override related longhand properties.

For details on shorthand properties, see the MDN web docs.

Examples

Invalid

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.
  

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

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

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

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

body { font-size: var(--font-size); }
@supports (font: -apple-system-body) {
  body { font-size: -apple-system-body; }
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases