CSS Structure Plus is a VS Code extension that helps organize and format CSS properties by categorizing them into predefined sections, such as Layout, Spacing, Typography, Colors, Transitions, and Animations, while preserving the CSS selectors. It enhances your workflow by making your CSS more readable and well-structured.tions.
- Organize CSS: Automatically categorizes properties into sections like Layout, Spacing, Typography, Colors, Transitions, Animations, and Miscellaneous.
- Preserve Selectors: Your CSS selectors (e.g., .class, #id, a[title] ) are kept intact.
- CSS Formatting: Format your CSS with proper indentation and structure.
- Open your CSS file in VS Code.
- Right-click in the editor and select Format CSS from the context menu.
- The CSS properties will be automatically categorized and formatted.
Alternatively, you can access the Format CSS command from the Command Palette (Cmd+Shift+P or Ctrl+Shift+P) and search for Format CSS..
If you would like to contribute to this extension, feel free to open an issue or submit a pull request. Contributions are always welcome!
Note
It's not recommended for production use, as it can result in a larger CSS file, which may slow down your website's performance.