Properties

There are 250+ CSS properties. What order do you write them?

You need to establish order for consistency. Choose your side:

Property Sorting	Pro / Con
Alphabetical order	Pro: order is obvious Con: related properties are flung apart
Logical order	Pro: can mirror your mental model for styling Con: learning curve, people are opinionated

Logical order is better. They enhance the mental visualization that’s necessary to author and maintain CSS in a complex architecture.

Logical, as always, Mr. Spock. Captain James Tiberius Kirk, USS Enterprise

Designing a box logically

When I think about styling an element, I ask these questions in order:

Is content injected via this box?
How does the box relate to parent, sibling, and child boxes?
What are the box’s dimensions (margin ➔ padding ➔ border)?
Is the box painted?
Is there typography?
Does the box adapt in 2D/3D/4D?
Does the user’s cursor react to the box?

Property groups

Property groups give structure to declarations that are related.

Group Order	What My Brain Is Deciding
1. Generated Content	Inject content into the DOM. Always first to avoid forgetting with `::before/::after` use.
2. Flow Context 3. Position Model 4. Float Model 5. Flex Model 6. Grid Model	Interplay and relationship between boxes.
7. Box Model	Physical dimensions of the box.
8. Visual Box	Box’s appearance (no effect on displaced space).
9. Typography	Font and text appearance.
10. Animation 11. Transform 12. Transition	Distort the box’s representation 2D/3D/4D.
13. Will Change	Rendering optimization.
14. Pointer + Selection	Modify the user’s input tool.

Subjective but logical

This order is subjective. It’s how I think and it’s influenced by a few factors.

Outside to inside

Think of the box in the context of the document, then itself, then inside itself, then time/actions affecting the box.

Historical availability of properties

CSS2 features (layout models) come before CSS3 (transforms, transitions, etc).

Frequency of use

Transforms and pointers are used infrequently, so they’re considered last.

Property order

Notice that (within each group) properties are almost always alphabetized or use clockwise rotation top|right|bottom|left. This helps the order stay predictable and new developers only need to learn the group order.

// Generated Content

content

counter-increment
counter-reset

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

quotes

// Flow Context

display
overflow
visibility

// Position Model

clip

position
top
right
bottom
left

z-index

// Float Model

clear
float

// Flex Model

flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap

align-content
align-items
align-self
justify-content
order

// Grid Model

grid

grid-area

grid-auto-columns
grid-auto-flow
grid-auto-rows

grid-column
grid-column-end
grid-column-gap
grid-column-start

grid-gap

grid-row
grid-row-end
grid-row-gap
grid-row-start

grid-template
grid-template-areas
grid-template-columns
grid-template-rows

// Box Model

box-sizing

width
max-width
min-width

height
max-height
min-height

margin
margin-top
margin-right
margin-bottom
margin-left

padding
padding-top
padding-right
padding-bottom
padding-left

border
border-collapse
border-color
border-radius
border-spacing
border-style
border-width

// Visual Box

background
background-color
background-repeat
background-size
background-url

box-shadow

object-fit

opacity

outline
outline-color
outline-style
outline-width

// Typography

color

font-family
font-size
font-stretch
font-style
font-variant
font-weight

hanging-punctuation

letter-spacing
line-height

text-align
text-decoration
text-indent
text-justify
text-overflow
text-shadow
text-stroke
text-transform

vertical-align

white-space
word-break
word-spacing

// Animation

animation
animation-delay
animation-direction
animation-duration
animation-iteration-count
animation-fill-mode
animation-name
animation-play-state
animation-timing-function

// Transform

backface-visibility

perspective
perspective-origin

transform
transform-origin
transform-style

// Transition

transition
transition-delay
transition-duration
transition-property
transition-timing-function

// Will Change

will-change

// Pointer + Selection

appearance
cursor
pointer-events
user-select

Tools

CSS Comb