CSS Property Ordering

css-property-ordering.md

CSS Property Ordering

Table of Contents

1. BOX

• Visibility
• Position
• Box Model
• Element-specific Properties
• Decoration

2. TEXT

• Font Properties
• Text Properties

3. ANIMATION
4. OTHER

1. BOX

Visibility

// If the element is hidden initially, display those properties first
display: none;
visibility: hidden;
opacity: 0;

visibility
overflow
opacity
backface-visibility
clip

Position

// Position and relativity
position
z-index
float
clear

Box Model

// Element structure
box-sizing
display

// Flexbox
flex-flow
  * flex-direction
  * flex-wrap
justify-content
align-items
align-content

// Flexbox (self)
order
align-self
flex
  * flex-grow
  * flex-shrink
  * flex-basis

// Element size
max-width
max-height
min-width
min-height
width
height
top
right
bottom
left
margin // TRBL order
padding // TRBL order

Element-specific Properties

list-style // For ul, ol, li
border-collapse // For table, tr, td, etc.
resize // For textarea

Decoration

background
  * background-color
  * background-image
  * background-position
  * background-size
  * background-repeat
filter
border
  * border-width
  * border-style
  * borer-color
  * border-radius
box-shadow
outline
  * outline-width
  * outline-style
  * outline-color
  * outline-offset
transform

2. TEXT

Font Properties

font-family
font-size
font-weight
font-style
color
line-height

Text Properties

text-align
text-decoration
text-overflow
text-transform
text-indent
text-shadow
word-spacing
word-wrap
overflow-wrap
content
vertical-align
letter-spacing
white-space

3. ANIMATION

animation
  * animation-name
  * animation-duration
  * animation-play-state
  * animation-timing-function
  * animation-delay
  * animation-iteration-count
  * animation-direction
transition
  * transition-property
  * transition-duration
  * transition-timing-function
  * transition-delay

4. OTHER

// Basic user interaction
cursor

// Browser-specific properties & hacks
background-color: #999 \9;
zoom