CSS Property Order

I like to order my CSS properties by type. It helps me to understand the CSS code faster and I know where I can find specific properties because they are always in the same group.

There was a poll on CSS Tricks in 2012 about CSS property order and most people order there properties grouped by type (45 %) or randomly (39 %).

I myself group the properties into four groups: Positioning, Display and Box Model, Appearance, Typography.

Here is an example:

main {
  /* Positioning */
  position
  top
  right
  bottom
  left
  float
  clear
  z-index

  /* Display and Box Model */
  content
  display
  vertical-align
  flex-direction
  justify-content
  grid-template-columns
  grid-template-areas
  grid-gap
  align-items
  width
  height
  margin
  padding
  box-sizing
  overflow
  visibility

  /* Appearance */
  background
  border
  box-shadow
  cursor
  list-style
  resize
  opacity
  transform
  transition
  animation

  /* Typography */
  color
  font-family
  font-size
  font-weight
  line-height
}