Treehouse: Grow your CSS skills. Land your dream job.

Software/Plugin to automatically sort CSS selectors/properties

  • # August 11, 2012 at 7:45 am

    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.

    # August 12, 2012 at 10:19 am

    I guess this is best done manually, or I just don’t know how to make plugins work! =P

    # August 12, 2012 at 11:17 am

    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.

    # August 12, 2012 at 11:34 am

    Oh, that’s a good tip, CTRL + SHIFT + UP/DOWN ARROW will help speed things up… Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.