This extension is used to sort CSS declarations according to the property names (order is defined below and it is not alphabetical but logical).
- Select lines with CSS declarations (one declaration per each line)
- Press
Ctrl + Shift + P - Enter
Sort CSS Declarations: Sort Selected CSS declarations - Press
Enter
CSS declarations under selection should be sorted according to the order below.
Open settings and enter the order of CSS properties that you want to have:
{
"sort-css-declarations.order": [
[
"z-index",
"visibility"
],
]
}This configuration means that you want "z-index" to appear earlier than "visibility".
Note: Sorting algorithm is case-sensitive.
Note: Your rule will only be applied if during sorting these two properties are compared by comparator.
- Press
Ctrl + Shift + P - Enter
Sort CSS Declarations: Sort All CSS declarations in the File - Press
Enter
I'd recommend assigning hotkeys to the commands above. For example, I use Alt + A(Option + A) for sorting all declarations.
- < all custom properties >
- 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