ken.fyi: 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