Css-Organizer - Organize Your CSS Properties

Css-organizer lets you organize your CSS properties file so that the properties under each rule can be sorted either

• alphabetically or
• systematically into groups.

You can select a single rule to sort or a selection of rules or all the rules. You setup your own way of grouping if you want.

The sorting does not affect the order of the CSS rules in the files.

Use Cases

UC 1 I want to sort the properties of a single rule alphabetically:

Place the cursor somewhere within the rule and select Context menu->Organize CSS->CSS Properties Alphabetically
or ctrl+alt+c and then a
or use the command palette ctrl+shift+p and then choose CSS Properties Alphabetically

UC 2 I want to sort the properties of this rule into groups:

Place the cursor somewhere within the rule and Context menu->Organize CSS->CSS Properties Grouped
or ctrl+alt+c and then g
or use the command palette ctrl+shift+p and then choose CSS Properties Grouped

UC 3 I want to sort the properties of a several rules:

Select the rules and then proceed as in UC1 or UC2. Every rule 'touched' by the selection will be included.

UC 4 I want to sort the properties of all rules. :

Select everything, ctrl-a, then do as in UC1 or UC2.

UC 5 When sorting in groups I want the group names to show, spaces between groups, nothing between groups :

Go to the settings and set the display options

UC 6 I want to set up grouping in my own way :

Edit the user-grouping.json file in the extension path/resources (or create your own file in the same directory) Go to settings select css-organizer.alternativeGroupingFileUse, if you have created a new file, put its name in css-organizer.alternativeGroupingFile
The files are found here:

• Windows %USERPROFILE%.vscode\extensions\ucsoftware.css-organizer-\resources
• macOS ~/.vscode/extensions/ucsoftware.css-organizer-/resources
• Linux ~/.vscode/extensions/ucsoftware.css-organizer-/resources
  

UC 7 I regret what I just did :

Just use ctrl-z and/or ctrl-y as you normally would.

css-organizer Settings

• css-organizer.displayOption Select if group names to show, spaces between groups, nothing between groups.
• css-organizer.alternativeGroupingFile Set the name of the file containing user defined CSS property grouping.
• css-organizer.alternativeGroupingFileUse Select if the user defined CSS property grouping shall be used.

Known Issues

• Erroneous CSS or badly formatted CSS (several properties on the same line, badly placed braces etc.) can give unpredictable results. Tip: Beautify first.

• Discontinuously selected rules does not work (yet).

Release Notes

1.0.3 First version. With some minor errors fixed.

1.0.4 Updated README.

Acknowledgements

The default sorting order for grouped CSS properties is very much inspired by the sorting order presented in the excellent Kevin Powell video discussing the benefits of organizing CSS properties.

Support the team

If you find that using this tool saves you time and money, and you can afford it, consider supporting us. Donate via Paypal

Web Site

Visit the UC Software website ucsoftware.net.