Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>sort-css-declarationsNew to Visual Studio Code? Get it now.
sort-css-declarations

sort-css-declarations

Andrew Beletskiy

|
211 installs
| (0) | Free
Sorts css declarations within selection
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Sort CSS Declarations

This extension is used to sort CSS declarations according to the property names (order is defined below and it is not alphabetical but logical).

How to use:

How to sort selected CSS declarations

  1. Select lines with CSS declarations (one declaration per each line)
  2. Press Ctrl + Shift + P
  3. Enter Sort CSS Declarations: Sort Selected CSS declarations
  4. Press Enter

CSS declarations under selection should be sorted according to the order below.

How to sort all CSS declarations in the file:

  1. Press Ctrl + Shift + P
  2. Enter Sort CSS Declarations: Sort All CSS declarations in the File
  3. Press Enter

Hotkeys

I'd recommend assigning hotkeys to the commands above. For example, I use Alt + A(Option + A) for sorting all declarations.

Property names order

  • display
  • opacity
  • visibility
  • z-index
  • orientation
  • max-zoom
  • min-zoom
  • user-zoom
  • zoom
  • position
  • top
  • right
  • bottom
  • left
  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content
  • align-self
  • order
  • float
  • clear
  • box-sizing
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • border
  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color
  • border-radius
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-image
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image
  • border-corner-image
  • border-top-left-image
  • border-top-right-image
  • border-bottom-right-image
  • border-bottom-left-image
  • outline
  • outline-width
  • outline-style
  • outline-color
  • outline-offset
  • clip
  • overflow
  • overflow-x
  • overflow-y
  • list-style
  • list-style-position
  • list-style-type
  • list-style-image
  • table-layout
  • border-spacing
  • border-collapse
  • caption-side
  • empty-cells
  • columns
  • column-width
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-width
  • column-rule-style
  • column-rule-color
  • column-span
  • direction
  • color
  • font
  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family
  • font-size-adjust
  • font-stretch
  • text-align
  • text-align-last
  • text-decoration
  • text-emphasis
  • text-emphasis-position
  • text-emphasis-style
  • text-emphasis-color
  • text-indent
  • text-justify
  • text-outline
  • text-overflow
  • text-overflow-ellipsis
  • text-overflow-mode
  • text-size-adjust
  • text-transform
  • text-wrap
  • text-shadow
  • vertical-align
  • writing-mode
  • hyphens
  • letter-spacing
  • tab-size
  • white-space
  • word-break
  • word-spacing
  • word-wrap
  • cursor
  • user-select
  • nav-index
  • nav-up
  • nav-right
  • nav-down
  • nav-left
  • pointer-events
  • resize
  • content
  • counter-increment
  • counter-reset
  • quotes
  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-clip
  • background-origin
  • background-size
  • box-shadow
  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state
  • filter
  • transform
  • transform-origin
  • will-change
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft