Properties

Rules

• The all property should precede all others
• Properties should be grouped by type:
  • Position
  • Layout
  • Box Model
  • Typography
  • Other
• Properties that have been/will be replaced by others (e.g. page-break-after with break-after) or properties that are from an older spec should directly precede their replacement
• Browser prefixed properties should ideally be handled by a tool (such as Autoprefixer), however if written manually they should directly precede their unprefixed equivalent
• Shorthand properties should directly precede their more specific components
• Properties relating to axes should be grouped following the standard order X, Y, Z (e.g. width, height)
• Properties relating to different points along the same axis should be grouped following reading order (e.g. grid-column-start, grid-column-end)
• Properties relating to edges should be grouped and ordered clockwise from top (e.g. top, right, bottom, left)
• Properties relating to corners should be grouped and ordered clockwise from top-left (e.g. border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)
• The position property should precede all others in the Position section
• Properties relating to parts of the box model should be sorted 'outside-in' at the end of the Box Model section:
  • Margin
  • Border
  • Padding
  • Content area
• Properties should be sorted alphabetically after accounting for all other rules
• Prefer shorthand properties, unless avoiding overriding inherited values

Groups

Position

position: static;
inset: auto;
inset-block: auto;
inset-block-start: auto;
inset-block-end: auto;
inset-inline: auto;
inset-inline-start: auto;
inset-inline-end: auto;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;

Layout

align-content: normal;
align-items: normal;
align-self: auto;
page-break-after: auto;
break-after: auto;
page-break-before: auto;
break-before: auto;
page-break-inside: auto;
break-inside: auto;
clear: none;
grid-column-gap: 0;
column-gap: normal;
display: inline;
flex: 0 1 auto;
flex-basis: auto;
flex-direction: row;
flex-flow: row nowrap;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: none;
grid-gap: normal normal;
gap: normal normal;
grid: none none none auto auto row 0 0 normal normal;
grid-area: auto / auto / auto / auto;
grid-auto-columns: auto;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-column-start: auto;
grid-column-end: auto;
grid-column: auto / auto;
grid-row-start: auto;
grid-row-end: auto;
grid-row: auto / auto;
grid-template: none / none / none;
grid-template-areas: none;
grid-template-columns: none;
grid-template-rows: none;
justify-content: normal;
justify-items: legacy;
justify-self: auto;
object-fit: fill;
object-position: 50% 50%;
order: 0;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
place-content: normal;
place-items: normal legacy;
place-self: auto;
resize: none;
grid-row-gap: 0;
row-gap: normal;
shape-image-threshold: 0;
shape-margin: 0;
shape-outside: none;
table-layout: auto;
vertical-align: baseline;
writing-mode: horizontal-tb;

Box model

box-sizing: content-box;
margin: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-block: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline: 0;
margin-inline-start: 0;
margin-inline-end: 0;
border: medium none currentcolor;
border-width: medium;
border-style: none;
border-color: currentcolor;
border-top: medium none currentcolor;
border-top-width: medium;
border-top-style: none;
border-top-color: currentcolor;
border-right: medium none currentcolor;
border-right-width: medium;
border-right-style: none;
border-right-color: currentcolor;
border-bottom: medium none currentcolor;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
border-left: medium none currentcolor;
border-left-width: medium;
border-left-style: none;
border-left-color: currentcolor;
border-block: medium none currentcolor;
border-block-width: medium;
border-block-style: none;
border-block-color: currentcolor;
border-block-start: medium none currentcolor;
border-block-start-width: medium;
border-block-start-style: none;
border-block-start-color: currentcolor;
border-block-end: medium none currentcolor;
border-block-end-width: medium;
border-block-end-style: none;
border-block-end-color: currentcolor;
border-inline: medium none currentcolor;
border-inline-width: medium;
border-inline-style: none;
border-inline-color: currentcolor;
border-inline-start: medium none currentcolor;
border-inline-start-width: medium;
border-inline-start-style: none;
border-inline-start-color: currentcolor;
border-inline-end: medium none currentcolor;
border-inline-end-width: medium;
border-inline-end-style: none;
border-inline-end-color: currentcolor;
border-collapse: separate;
border-image: none 100% 1 0 stretch;
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;
border-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
border-spacing: 0;
padding: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
padding-block: 0;
padding-block-start: 0;
padding-block-end: 0;
padding-inline: 0;
padding-inline-start: 0;
padding-inline-end: 0;
width: auto;
min-width: none;
max-width: none;
height: auto;
min-height: none;
max-height: none;
block-size: auto;
min-block-size: 0;
max-block-size: 0;
inline-size: auto;
min-inline-size: 0;
max-inline-size: 0;

Typography

direction: ltr;
font: normal normal normal medium/normal system-ui;
font-family: system-ui;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-optical-sizing: auto;
font-size: medium;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: normal;
hanging-punctuation: none;
hyphens: manual;
letter-spacing: normal;
line-break: auto;
line-height: normal;
orphans: 2;
overflow-wrap: normal;
quotes: initial;
tab-size: 8;
text-align-last: auto;
text-align: start;
text-combine-upright: none;
text-decoration: currentcolor none solid;
text-decoration-color: currentcolor;
text-decoration-line: none;
text-decoration-skip-ink: auto;
text-decoration-skip: objects;
text-decoration-style: solid;
text-emphasis: currentcolor none;
text-emphasis-color: currentcolor;
text-emphasis-position: over right;
text-emphasis-style: none;
text-indent: 0;
text-justify: auto;
text-orientation: mixed;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-transform: none;
text-underline-position: auto;
unicode-bidi: normal;
white-space: normal;
widows: 2;
word-break: normal;
word-spacing: normal;

Other

animation: none 0s ease 0s 1 normal none running;
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
backface-visibility: visible;
background: none 0% 0%/auto auto repeat padding-box border-box scroll transparent;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto auto;
box-decoration-break: slice;
box-shadow: none;
caption-side: top;
caret-color: auto;
clip-path: none;
color: inherit;
color-adjust: economy;
column-count: auto;
column-fill: balance;
column-rule-color: currentcolor;
column-rule-style: none;
column-rule-width: medium;
column-rule: medium none currentcolor;
column-span: none;
column-width: auto;
columns: auto auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
empty-cells: show;
filter: none;
image-orientation: 0deg;
image-rendering: auto;
isolation: auto;
list-style: disc outside none;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
mask: none match-source no-repeat center border-box border-box auto add;
mask-border: alpha 0 stretch 0 none auto;
mask-border-mode: alpha;
mask-border-outset: 0;
mask-border-repeat: stretch;
mask-border-slice: 0;
mask-border-source: none;
mask-border-width: auto;
mask-clip: border-box;
mask-composite: add;
mask-image: none;
mask-mode: match-source;
mask-origin: border-box;
mask-position: center;
mask-repeat: no-repeat;
mask-size: auto;
mix-blend-mode: normal;
opacity: 1;
outline: currentcolor none medium;
outline-color: currentcolor;
outline-offset: 0;
outline-style: none;
outline-width: medium;
perspective: none;
perspective-origin: 50% 50%;
pointer-events: auto;
rotate: none;
scale: none;
scroll-behavior: auto;
scroll-margin: 0;
scroll-margin-top: 0;
scroll-margin-right: 0;
scroll-margin-bottom: 0;
scroll-margin-left: 0;
scroll-margin-block: 0;
scroll-margin-block-start: 0;
scroll-margin-block-end: 0;
scroll-margin-inline-start: 0;
scroll-margin-inline-end: 0;
scroll-margin-inline: 0;
scroll-padding: auto;
scroll-padding-top: auto;
scroll-padding-right: auto;
scroll-padding-bottom: auto;
scroll-padding-left: auto;
scroll-padding-block: auto;
scroll-padding-block-start: auto;
scroll-padding-block-end: auto;
scroll-padding-inline: auto;
scroll-padding-inline-start: auto;
scroll-padding-inline-end: auto;
scroll-snap-align: none;
scroll-snap-stop: normal;
scroll-snap-type: none;
scrollbar-color: auto;
scrollbar-width: auto;
touch-action: auto;
transform: none;
transform-box: border-box;
transform-origin: 50% 50% 0;
transform-style: flat;
transition: all 0s ease 0s;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
translate: none;
visibility: visible;
will-change: auto;