useSortedProperties

CSS

Summary

Section titled Summary

Note

This rule is currently only available in the 2.0 beta release.

• Diagnostic Category: assist/source/useSortedProperties
• The default severity of this rule is information.

How to enable in your editor

Section titled How to enable in your editor

Zed

~/.config/zed/settings.json

{
  "code_actions_on_format": {
    "source.action.useSortedProperties.biome": true,
  }
}

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedProperties.biome": "explicit",
  }
}

Other editors

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

Description

Section titled Description

Enforce ordering of CSS properties and nested rules.

This rule ensures the contents of a CSS rule are ordered consistently.

Properties are ordered semantically, with more important properties near the top and similar properties grouped together. Nested rules and at-rules are placed after properties.

The ordering is roughly:

1. Custom properties
2. Layout properties (display, flex, grid)
3. Margin and padding properties
4. Typography properties (font, color)
5. Interaction properties (pointer-events, visibility)
6. Background and border properties
7. Transition and animation properties
8. Nested rules, media queries and other at-rules

Examples

Section titled Examples

Invalid

Section titled Invalid

p {
  transition: opacity 1s ease;
  border: 1px solid black;
  pointer-events: none;
  color: black;
  margin: 8px;
  display: block;
  --custom: 100;
}

p {
  span { color: blue; }
  color: red;
}

Valid

Section titled Valid

p {
  --custom: 100;
  display: block;
  margin: 8px;
  color: black;
  pointer-events: none;
  border: 1px solid black;
  transition: opacity 1s ease;
}

p {
  color: red;
  span { color: blue; }
}

How to configure

Section titled How to configure

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedProperties": "on"
      }
    }
  }
}