https://github.com/psparwez/css-structure-plus

A VS Code extension that organizes and formats CSS properties by categories like Layout, Spacing, Typography, and more, while preserving selectors for clean and readable code.
https://github.com/psparwez/css-structure-plus

code-organization css css-formatter css-structure css-structure-plus developer-tools vscode-extension

Last synced: 4 months ago
JSON representation

A VS Code extension that organizes and formats CSS properties by categories like Layout, Spacing, Typography, and more, while preserving selectors for clean and readable code.

• Host: GitHub
• URL: https://github.com/psparwez/css-structure-plus
• Owner: psparwez
• Created: 2024-12-24T13:55:27.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-12-24T15:10:43.000Z (6 months ago)
• Last Synced: 2025-01-05T10:12:44.539Z (5 months ago)
• Topics: code-organization, css, css-formatter, css-structure, css-structure-plus, developer-tools, vscode-extension
• Language: TypeScript
• Homepage:
• Size: 37.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# CSS Structure Plus Extension

**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.

## 📸 Demo Screenshots

![css-structure-plus](https://github.com/user-attachments/assets/793df086-7640-466d-9669-a11a2572f560)

## 🚀 Features

- 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.

## ⚙️ Usage

- 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..

## 🤝 Contributing

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.