Skip to content

Instantly share code, notes, and snippets.

@awkale
Last active April 29, 2024 09:18
Show Gist options
  • Star 40 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save awkale/ad46e2ade70e833fa178 to your computer and use it in GitHub Desktop.
Save awkale/ad46e2ade70e833fa178 to your computer and use it in GitHub Desktop.
#CSS Declaration order

css property order

Related property declarations should be grouped together following the order:

  1. Positioning
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  1. Box model
  • display
  • float
  • width
  • height
  • max-width
  • max-height
  • min-width
  • min-height
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin-collapse
  • margin-top-collapse
  • margin-right-collapse
  • margin-bottom-collapse
  • margin-left-collapse
  • overflow
  • overflow-x
  • overflow-y
  • clip
  • clear
  1. Typographic
  • font
  • font-family
  • font-size
  • font-smoothing
  • osx-font-smoothing
  • font-style
  • font-weight
  • hyphens
  • src
  • line-height
  • letter-spacing
  • word-spacing
  • color
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-rendering
  • text-size-adjust
  • text-shadow
  • text-transform
  • word-break
  • word-wrap
  • white-space
  • vertical-align
  • list-style
  • list-style-type
  • list-style-position
  • list-style-image
  • pointer-events
  • cursor
  1. Visual
  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-size
  • border
  • border-collapse
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border-color
  • border-image
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-spacing
  • border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-top-left-radius
  • border-radius-topright
  • border-radius-bottomright
  • border-radius-bottomleft
  • border-radius-topleft
  • content
  • quotes
  • outline
  • outline-offset
  • opacity
  • filter
  • visibility
  • size
  • zoom
  • transform
  • box-align
  • box-flex
  • box-orient
  • box-pack
  • box-shadow
  • box-sizing
  • table-layout
  • animation
  • animation-delay
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation-fill-mode
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • background-clip
  • backface-visibility
  • resize
  • appearance
  • user-select
  • interpolation-mode
  • direction
  • marks
  • page
  • set-link-source
  • unicode-bidi
  • speak
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment