Frakto CSS Order
Fragment. Optimize. Reconstruct.
Frakto CSS Order is a thoughtfully crafted guide to ordering CSS properties based on logical grouping, real-world usage, and the browser’s rendering flow. Instead of relying on arbitrary or alphabetical sorting, this structure prioritizes readability, maintainability, and performance — helping developers write cleaner, faster, and more intuitive stylesheets.
Most CSS sorters follow alphabetical, SMACSS, or arbitrary schemes. frakto-css-order redefines that. It's crafted around:
- Rendering Tree Logic – Inspired by how browsers parse and apply styles.
- Developer Experience – Easier to read, write, and maintain.
- Compression Efficiency – Related properties stay together, reducing redundancy.
Defines the spatial placement of elements in the document flow, including stacking context, offsets, and flow disruptions.
Controls the physical dimensions of elements, including sizing, padding, and margins — everything that affects how a box occupies space.
Manages how child elements are arranged within a parent, including layout systems like Flexbox, Grid, and multi-column flows.
Handles everything related to text: font settings, spacing, alignment, rendering, punctuation, and writing direction.
Affects the visual appearance of elements — background, borders, shadows, opacity, masks, and visibility. This is what users "see".
Covers transforms, transitions, and animations — any visual changes over time or space, including scaling, rotation, and motion.
Defines how elements respond to user interaction and device input. Includes scroll behavior, pointer interaction, selection, and overflow.
A catch-all category for properties that don't fit elsewhere — including counters, content injection, printing, and global resets.
Contributions are welcome and encouraged.
If you'd like to help improve this plugin, please open a pull request or issue.
Make sure to follow our contributing guidelines before submitting any changes.
MIT License — Copyright © 2025 Frakto
This project is maintained with love and dedication.
If you'd like to support its continued development, you can do so here:
