The Royal Order of Operations

I always thought it would have been funny to have used that name for something substantial somehow. Instead, I’m spending it on the title of this page. But, it just fits too well for me to care.

Because I decided that on this page is where I’m going to keep my list of lists about which order things should go in and (optionally) explain why.

Strong opinions held loosely. Change my mind.

---

Article I: The Order In Which CSS Properties Are Declared

position

inset inset-block inset-block-start
top
inset-block-end
bottom inset-inline inset-inline-start
left
inset-inline-end
right

z-index
float
clear

display
flex-direction
flex-wrap
justify-content
align-items
align-content
grid-template-columns
grid-template-rows
grid-template-areas
grid-column
grid-row
gap
order
container-type
container-name
aspect-ratio

box-sizing

block-size height
min-block-size
min-height
max-block-size
max-height inline-size width
min-inline-size
min-width
max-inline-size
max-width

object-fit
object-position

margin margin-block margin-block-start
margin-top
margin-block-end
margin-bottom margin-inline margin-inline-start
margin-left
margin-inline-end
margin-right padding padding-block padding-block-start
padding-top
padding-block-end
padding-bottom padding-inline padding-inline-start
padding-left
padding-inline-end
padding-right border border-block

border-block-width
border-block-style
border-block-color

border-block-start border-top
border-block-start-width
border-top-width
border-block-start-style
border-top-style
border-block-start-color
border-top-color border-block-end border-bottom
border-block-end-width
border-bottom-width
border-block-end-style
border-bottom-style
border-block-end-color
border-bottom-color border-inline border-inline-width
border-inline-style
border-inline-color
border-inline-start border-left
border-inline-start-width
border-left-width
border-inline-start-style
border-left-style
border-inline-start-color
border-left-color border-inline-end border-right
border-inline-end-width
border-right-width
border-inline-end-style
border-right-style
border-inline-end-color
border-right-color border-radius border-start-start-radius
border-top-left-radius
border-start-end-radius
border-top-right-radius
border-end-start-radius
border-bottom-left-radius
border-end-end-radius
border-bottom-right-radius outline outline-width
outline-style
outline-color
outline-offset background background-color
background-image
background-position
background-size
background-repeat

box-shadow

filter
backdrop-filter
opacity
mix-blend-mode
isolation
clip-path

font
font-family
font-size
font-weight
font-style
line-height
letter-spacing
text-align

text-decoration text-decoration-line
text-decoration-style
text-decoration-color

text-transform
text-wrap
hyphens
color
accent-color

list-style list-style-type
list-style-position
list-style-image

transform

transition transition-property
transition-duration
transition-timing-function
transition-delay animation animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode

will-change

overflow overflow-block overflow-y overflow-inline overflow-x

scroll-behavior
scroll-snap-type
scroll-snap-align
content-visibility
cursor
pointer-events
touch-action
visibility