Order of css property with stylelint-config-idiomatic-css

  1. Priority
  2. Positioning
  3. BoxModel
  4. Backgrounds
  5. Typography

1. Priority

  • content

2. Positioning

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

3. BoxModel

3.1 CSSGridLayoutModule

3.1.1 gridParentRules
  • grid-template
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-gap
  • grid-column-gap
  • grid-row-gap
  • grid
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
3.1.2 gridChildrenRules
  • grid-area
  • grid-column
  • grid-row
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

3.2 FlexibleBoxLayoutModule

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex-flow
  • flex-wrap
  • flex-direction
  • order

3.3 CSSBoxAlignmentModule

  • justify-items
  • justify-content
  • justify-self
  • align-items
  • align-content
  • align-self

#####

  • overflow
  • overflow-x
  • overflow-y
  • box-sizing
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • border
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

4. Backgrounds

4.1 other

  • background
  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment

5. Typography

  • color
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • white-space
  • word-break
  • word-spacing

References