CSS Property Organizer

Cleaner CSS. Better organized. Easier to read.

Features

CSS Property Organizer automatically sorts CSS declarations into predefined groups based on their purpose, helping you keep your stylesheets structured and readable.

• Automatic organization: rearranges CSS properties into logical groups.

• Clear grouping: separates groups with comments for easier navigation.

• Consistent formatting: applies the same organization across your CSS rules.

Before

.card {
  color: rgb(51, 51, 51);
  display: flex;
  padding: 20px;
  background: white;
  position: relative;
  border: 1px solid rgb(204, 204, 204);
}

After

.card {
  /* background */
  background: white;

  /* layout */
  display: flex;
  position: relative;

  /* border */
  border: 1px solid rgb(204, 204, 204);

  /* box */
  padding: 20px;

  /* typography */
  color: rgb(51, 51, 51);
}

The extension keeps declarations within their original CSS rule while reorganizing them according to their property group.

Usage

1. Open a CSS file in Visual Studio Code.
2. Open the Command Palette with Ctrl+Shift+P.
3. Run Organize CSS by Groups.

The extension only operates on CSS files.

Property Groups

Properties are organized into groups such as:

• Background
• Layout
• Border
• Box
• Typography
• Animation
• Other

The property groups are defined in the extension configuration and can be expanded as the project evolves.

Requirements

• Visual Studio Code 1.105.0 or later.

Development

Clone the repository and install the dependencies:

git clone https://github.com/albxrtx/css-property-organizer.git
cd css-property-organizer
npm install

Compile the extension:

npm run compile

Run the tests:

npm test

License

This project is licensed under the MIT License.