declaration-order.md

CSS properties shall be ordered as follows:

Positioning

• position
• top
• right
• bottom
• left
• z-index

Display & Box Model

• box-sizing
• display
• flex
  • -align
  • -basis
  • -direction
  • -wrap
  • -flow
  • -shrink
  • -grow
  • -order
  • -pack
• align-content
• align-items
• align-self
• justify-content
• order
• float
• width (min-, max-)
• height (min-, max-)
• padding (-top, -right, -bottom, -left)
• margin (-top, -right, -bottom, -left)
• overflow (-x, -y)
• clear

Style

• font
  • -family
  • -size
  • -style
  • -weight
• line-height
• color
• text-align
• text-decoration
• text-indent
• text-justify
• text-shadow
• text-transform
• letter-spacing
• word-break
• word-spacing
• word-wrap
• vertical-align
• list-style
• cursor
• visibility
• content
• background
  • -color
  • -image
  • -repeat
  • -position
• border
  • -color
  • -style
  • -width
  • -top, -right, -bottom, -left
  • -radius
• outline
• box-shadow
• opacity
• transition
• animation

This order of properties is based on: https://github.com/twbs/stylelint-config-twbs-bootstrap/blob/master/css/index.js

See also: https://medium.com/@antonball/css-property-ordering-95262f788d9f