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-starttop
inset-block-end
bottom
inset-inline
inset-inline-startleft
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
heightmin-block-size
min-height
max-block-size
max-height
inline-size
widthmin-inline-size
min-width
max-inline-size
max-width
object-fit
object-position
margin
margin-block
margin-block-startmargin-top
margin-block-end
margin-bottom
margin-inline
margin-inline-startmargin-left
margin-inline-end
margin-right
padding
padding-block
padding-block-startpadding-top
padding-block-end
padding-bottom
padding-inline
padding-inline-startpadding-left
padding-inline-end
padding-right
border
border-block
border-block-width
border-block-style
border-block-color
border-block-start
border-topborder-block-start-width
border-top-width
border-block-start-style
border-top-style
border-block-start-color
border-top-color
border-block-end
border-bottomborder-block-end-width
border-bottom-width
border-block-end-style
border-bottom-style
border-block-end-color
border-bottom-color
border-inline
border-inline-widthborder-inline-style
border-inline-color
border-inline-start
border-leftborder-inline-start-width
border-left-width
border-inline-start-style
border-left-style
border-inline-start-color
border-left-color
border-inline-end
border-rightborder-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-radiusborder-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-widthoutline-style
outline-color
outline-offset
background
background-colorbackground-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-linetext-decoration-style
text-decoration-color
text-transform
text-wrap
hyphens
color
accent-color
list-style
list-style-typelist-style-position
list-style-image
transform
transition
transition-propertytransition-duration
transition-timing-function
transition-delay
animation
animation-nameanimation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
will-change
overflow
overflow-block overflow-y overflow-inline overflow-xscroll-behavior
scroll-snap-type
scroll-snap-align
content-visibility
cursor
pointer-events
touch-action
visibility