CSS Property Order
Order the properties in every rule outside-in, following Concentric-CSS: start with how the box is placed on the page, then work inward to its textual content. A reader learns where the element sits before learning what it looks like, so they can stop reading once they reach the part they came for.
Group Order
- box-sizing
- display, position (top/right/bottom/left)
- float, clear
- flex
- grid
- align, justify
- order, columns
- transform
- transition
- visibility, opacity, z-index
- margin
- outline
- border (width, style, radius, color, image, box-shadow)
- background, cursor
- padding
- width (min/max), height (min/max)
- overflow, resize
- list-style, table-layout
- animation
- vertical-align
- text (alignment, decoration, spacing)
- color
- font
- content, counters
- page breaks
For a property that is not listed, place it with the group it belongs to by function. gap sits with flex and grid, filter with transform, caret-color with color.
Example
Reorder an existing rule like this. Nothing is added or removed, only moved.
Before:
.box {
color: #333;
display: flex;
font-size: 1rem;
width: 100%;
border: 1px solid;
margin: 1rem;
padding: 0.5rem;
visibility: hidden;
}
After:
.box {
display: flex;
visibility: hidden;
margin: 1rem;
border: 1px solid;
padding: 0.5rem;
width: 100%;
color: #333;
font-size: 1rem;
}
1---2name: css-standards3description: Order CSS properties outside-in following Concentric-CSS. Use this skill whenever writing, editing, or reviewing CSS, SCSS, Less, styled-components, or Tailwind @apply blocks, including when adding a single property to an existing rule, and even when the user says nothing about property order. Also use when reviewing a diff that touches stylesheets.4---56# CSS Property Order78Order the properties in every rule outside-in, following [Concentric-CSS](https://github.com/brandon-rhodes/Concentric-CSS): start with how the box is placed on the page, then work inward to its textual content. A reader learns where the element sits before learning what it looks like, so they can stop reading once they reach the part they came for.910## Group Order11121. box-sizing132. display, position (top/right/bottom/left)143. float, clear154. flex165. grid176. align, justify187. order, columns198. transform209. transition2110. visibility, opacity, z-index2211. margin2312. outline2413. border (width, style, radius, color, image, box-shadow)2514. background, cursor2615. padding2716. width (min/max), height (min/max)2817. overflow, resize2918. list-style, table-layout3019. animation3120. vertical-align3221. text (alignment, decoration, spacing)3322. color3423. font3524. content, counters3625. page breaks3738For a property that is not listed, place it with the group it belongs to by function. `gap` sits with flex and grid, `filter` with transform, `caret-color` with color.3940## Example4142Reorder an existing rule like this. Nothing is added or removed, only moved.4344Before:4546```css47.box {48 color: #333;49 display: flex;50 font-size: 1rem;51 width: 100%;52 border: 1px solid;53 margin: 1rem;54 padding: 0.5rem;55 visibility: hidden;56}57```5859After:6061```css62.box {63 display: flex;64 visibility: hidden;65 margin: 1rem;66 border: 1px solid;67 padding: 0.5rem;68 width: 100%;69 color: #333;70 font-size: 1rem;71}72```
rewse