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:

  1. Is content injected via this box?
  2. How does the box relate to parent, sibling, and child boxes?
  3. What are the box’s dimensions (margin ➔ padding ➔ border)?
  4. Is the box painted?
  5. Is there typography?
  6. Does the box adapt in 2D/3D/4D?
  7. 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
z-index

top
right
bottom
left
// 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
// 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-size
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