Automatic CSS Sorting Tool and Advanced Style Grouper

The Advanced CSS Grouper & Manual Sort Tool is designed for web developers and designers who want to organize their CSS logically, efficiently, and securely. This online tool not only groups your CSS selectors based on their structure but also allows you to manually rearrange them using an intuitive drag-and-drop interface — without losing any indentation, or formatting.

🔍 What This Tool Does

When you paste your CSS code into the input area, the tool analyzes and groups selectors that share the same parent hierarchy. For example, selectors like #button, #button span, and #button span:hover will automatically be recognized as related components and placed in the same visual group. This allows you to keep complex style sheets organized while still maintaining control over the order of appearance.

✨ Key Benefits

• Smart CSS Grouping: Automatically detects related selectors and keeps them together.
• Manual Reordering: Drag and drop groups to adjust the order manually.
• Optional Merging: You can choose whether to merge grouped CSS or keep them separate.

🧩 Imagine when you have a messy bunch of CSS like this:

input, textarea {
  width:100%;
}

body {
  color:#000;
}

.label {
  width:100%;
}

.sidebar a:hover {
  text-decoration:uncerline;
}

.sidebar a {
  display:none;
}

* {
  width:250%;
}

pre {
  color:#333; background:red;
}

.sidebar {
  position:sticky; top:20px;
}

@layer reset, base, components, utilities;

@media (max-width:600px) {
  h1 {
    font-size:1.5rem;
  }
  .menu-toggle {
    display:block;
  }
}

@import url('style/reset.css');

pre {
  color:#aaa;
}

@keyframes fadeIn {
  from {
    opacity:0; transform:translateY(-10px);
  }
  to {
    opacity:1; transform:translateY(0);
  }
}

@layer reset, base, components, utilities;

@layer base {
  h1 {
    font-size:2rem;
  }
}

@charset "UTF-8";

body {
  color:#aaa;
}

@media (max-width:900px) {
  h1 {
    font-size:2rem; color:white;
  }
}

@media (max-width:600px) {
  h1 {
    font-size:1.1rem;
  }
}

❤️ With our tool, your CSS becomes much prettier and easier to read:

@charset "UTF-8";
@import url('style/reset.css');
@layer reset, base, components, utilities;

* {
  width: 250%;
}

body {
  color: #aaa;
}

input, textarea, .label {
  width: 100%;
}

.sidebar {
  position: sticky;
  top: 20px;
}

.sidebar a {
  display: none;
}

.sidebar a:hover {
  text-decoration: uncerline;
}

pre {
  color: #aaa;
  background: red;
}

@media (max-width:900px) {
h1 {
    font-size: 2rem;
    color: white;
  }
}

@media (max-width:600px) {
h1 {
    font-size: 1.1rem;
  }
  .menu-toggle {
    display: block;
  }
}

@keyframes fadeIn {
  from {
    opacity:0; transform:translateY(-10px);
  }
  to {
    opacity:1; transform:translateY(0);
  }
}

@layer base {
  h1 {
    font-size:2rem;
  }
}

🧠 How It Works

The tool uses a lightweight PHP parser that scans your CSS for selector patterns. Here's a simplified breakdown of the steps:

1. Input Cleaning: The script removes null bytes and extra whitespace for safe processing.
2. CSS Parsing: Each selector and its child rules are identified using regex-based grouping logic.
3. Grouping: Parent-child selectors (e.g., #menu, #menu li, #menu li a:hover) are grouped together visually.
4. Manual Sorting: You can drag entire groups up or down to control final CSS order.
5. Output Generation: When submitted, the script reassembles all CSS and returns a clean, logically ordered file.

🧩 Example: Merging Duplicate Selectors

If the "Combine duplicate selector" option is checked, the tool correctly merges properties. The last declared property always wins, just like in a browser.

Your Input CSS:

span {
  color: red;
  font-size: 14px;
}
p {
  color: black;
}
span {
  color: blue; /* This will overwrite 'red' */
}

Sorted + Merged Output:

p {
  color: black;
}
span {
  color: blue;
  font-size: 14px;
}

If the option is unchecked, it will simply sort them so they appear next to each other:

Sorted Output:

p {
  color: black;
}
span {
  color: red;
  font-size: 14px;
}
span {
  color: blue;
}

🪄 How to Use This Tool

1. Paste your CSS code into the input area.
2. Click “Group CSS” to automatically organize your selectors.
3. Use the drag handles to manually reorder groups if needed.
4. (Optional) Check or uncheck the “Combine duplicate selector” option based on your needs.
5. Click “Generate Output” — your well-structured CSS will appear instantly.

🔒 Security & Reliability

This tool is built with secure PHP logic that ensures no unsafe execution, file writing, or remote includes. Every form submission is validated, and no script tags or malicious payloads can be executed. It’s designed to be safe for both local and public use.

Note: This tool does not modify the contents of special CSS rules. @media and @keyframes blocks are automatically moved to the bottom of the stylesheet, while other rules such as @import, @font-face, @supports, @page, and @layer are automatically placed at the top. The drag option is not available for these rules.

Combine duplicate selector (recommended)
Group & Sort