CSS Organizer
CSS Organizer is a Visual Studio Code extension that streamlines and optimizes the management of CSS files by automatically reorganizing CSS properties into a logical and consistent order upon saving.
Key Features
1. Automatic CSS Property Sorting
- Automatically reorganizes CSS properties into a predefined, logical order every time you save a file.
2. Logical CSS Property Order
- Properties are grouped and sorted based on functionality, such as:
- Fonts:
font-family
, font-size
- Positioning:
position
, top
, left
, etc.
- Sizing:
width
, height
, margin
, padding
- Visual styles:
background-color
, border
, box-shadow
Example of the sorting order:
.my-class {
font-family;
cursor;
user-select;
overflow;
position;
top;
left;
bottom;
right;
margin: auto; /* Special handling for "auto" values */
display;
flex;
align-items;
justify-content;
width;
height;
color;
background-color;
border;
border-radius;
box-shadow;
transform;
transition;
z-index;
}
• Ensures that your CSS files follow a uniform style, improving readability and maintainability.
4. SCSS and LESS Support (Optional)
• Apply the same sorting rules to SCSS and LESS files to maintain consistency across stylesheets.
Why Use CSS Organizer?
• Save Time: No more manually sorting CSS properties.
• Improve Readability: Clean and structured code is easier to understand.
• Boost Collaboration: Ensure consistent styling across team projects.
• Follow Modern Conventions: Compatible with BEM, SMACSS, Atomic CSS, and other methodologies.
How to Use
1. Install: Download CSS Organizer from the Visual Studio Code Marketplace.
2. Edit: Open a CSS file and make edits.
3. Save: Save the file with Cmd+S (Mac) or Ctrl+S (Windows/Linux).
4. Watch: The properties will be automatically sorted and formatted!
Example Use Case
Before saving:
.my-class {
height: 100px;
font-family: Arial;
position: absolute;
color: red;
}
After saving:
.my-class {
font-family: Arial;
position: absolute;
height: 100px;
color: red;
}
CSS Organizer
Keep your CSS clean, structured, and easy to maintain! 🎨