treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Software/Plugin to automatically sort CSS selectors/properties

  • In the comments of the recent "CSS Order" poll, it was asked if there were any tools that can sort your CSS based on whatever settings you prefer (ie. alphabetized, by type, etc...).

    Someone mentioned CSScomb, so i tried the Sublime Text 2 plugin, but it only gave me an error message, so I tried the CSSTidy plugin, which cleaned things up, but didn't sort anything. Years ago, I used a software package called TopStyle Pro that had the option to "sweep" up your CSS and sort everything in whatever order you specified, which was really nice.

    My question now is if there are currently any similar tools/plugins that can do this? I usually use Dreamweaver or Notepad++/Sublime Text 2, so a plugin would be preferable. I like to use the Dreamweaver CSS dialog sometimes for convenience, but the code usually comes out sorted in whatever order it's entered, leaving me to clean things up manually, which can take some time. Thanks for any suggestions.
  • I guess this is best done manually, or I just don't know how to make plugins work! =P
  • Yeah I'd say do it manually :p You could always create an app to do it for you but it doesn't seem worth it.

    If you work in Sublime and contain one css property per line:
    #example {
    property: value;
    property: value;
    property: value;
    }

    You could easily swap a line the value is on by pressnig: CTRL/CMD + SHIFT + UP/DOWN ARROW.

    Edit: You could probably find a Sass plugin that does the property ordering for you or write one yourself. I'd imagine that would be easier than writing something yourself from scratch.
  • Oh, that's a good tip, CTRL + SHIFT + UP/DOWN ARROW will help speed things up... Thanks!