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