useSortedProperties (CSS)

Language CSS

Summary

Rule available since: v2.0.0
Diagnostic Category: assist/source/useSortedProperties

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.useSortedProperties.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.useSortedProperties.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.useSortedProperties.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedProperties": "on"
6
      }
7
    }
8
  }
9
}

Description

Sort CSS properties and nested rules into a consistent order.

The action uses a predefined order that groups related properties by purpose. Custom properties come first, and nested rules or at-rules such as @media come after declarations.

The main groups are:

Custom properties.
Layout properties, including display, visibility, flexbox, and grid.
Margin and padding properties.
Typography properties, including font and color.
Interaction properties, including pointer-events.
Background and border properties.
Transition and animation properties.
Nested rules, media queries, and other at-rules.

Biome skips blocks containing unknown properties because their correct position is not known. If sorting could change the result of a shorthand and longhand combination, Biome reports the block but does not offer the action.

Examples

Invalid

1
p {
2
  transition: opacity 1s ease;
3
  border: 1px solid black;
4
  pointer-events: none;
5
  color: black;
6
  margin: 8px;
7
  display: block;
8
  --custom: 100;
9
}

code-block.css ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
     1  1 │   p {
     2    │ - ··transition:·opacity·1s·ease;
     3    │ - ··border:·1px·solid·black;
     4    │ - ··pointer-events:·none;
        2 │ + ··--custom:·100;
        3 │ + ··display:·block;
        4 │ + ··margin:·8px;
     5  5 │     color: black;
     6    │ - ··margin:·8px;
     7    │ - ··display:·block;
     8    │ - ··--custom:·100;
        6 │ + ··pointer-events:·none;
        7 │ + ··border:·1px·solid·black;
        8 │ + ··transition:·opacity·1s·ease;
     9  9 │   }
    10 10 │

1
p {
2
  span { color: blue; }
3
  color: red;
4
}

code-block.css ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 1 │   p {
    2   │ - ··span·{·color:·blue;·}
    3   │ - ··color:·red;
      2 │ + ··color:·red;
      3 │ + ··span·{·color:·blue;·}
    4 4 │   }
    5 5 │

Valid

1
p {
2
  --custom: 100;
3
  display: block;
4
  margin: 8px;
5
  color: black;
6
  pointer-events: none;
7
  border: 1px solid black;
8
  transition: opacity 1s ease;
9
}

1
p {
2
  color: red;
3
  span { color: blue; }
4
}