src/content/docs/assist/actions/use-sorted-properties.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components'; import EditorAction from "@/components/EditorAction.astro";
<Tabs> <TabItem label="CSS" icon="seti:css"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`assist/source/useSortedProperties`](/reference/diagnostics#diagnostic-category) ## How to enable in your editor <EditorAction includeFixAll action="source.action.useSortedProperties.biome" /> ## How to configure ```json title="biome.json" { "assist": { "actions": { "source": { "useSortedProperties": "on" } } } }## 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
### Invalid
```css
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;
}
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; }
}