3

Is There A CSS Tool To Sort Properties Alphabetically?

almost 5 years ago from , Creator of Luminoto Photos

I would prefer to have my css code in alphabetical order per element, however it is annoying to always sort them.

Does anyone know of a tool for sublime text 2 that would sort the following with a single click

.clothessize{ display: inline-block; vertical-align: middle; color: $orangecolor; border: 2px solid $orange_color; font-size: 16px; padding: 6px; border-radius: 100%; margin-left: 5px; }

sorts to

.clothessize{ border-radius: 100%; border: 2px solid $orangecolor; color: $orange_color; display: inline-block; font-size: 16px; margin-left: 5px; padding: 6px; vertical-align: middle; }

10 comments

  • Andrew LiebchenAndrew Liebchen, almost 5 years ago

    F5. Exactly what you need.

    Only wish that it would sort border before border-right, for instance. Sure there's a way to do this...

    2 points
  • Stelian FirezStelian Firez, almost 5 years ago

    There's something called CSSComb - https://github.com/csscomb/csscomb.js. There's a Sublime Text plugin for it, but you need node.js installed in order to work.

    I have never used it, so I can't vouch that it's easy to work with. Here's a sample config file https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

    2 points
  • Derryl CarterDerryl Carter, almost 5 years ago

    I'm not aware of one that alphabetizes your CSS properties, but CSSTidy is a great tool for cleaning up + formatting your CSS for consistency. You could probably dig in and customize it to do what you want.

    Alternately, you could also organize your properties based on a different scheme (such as the format encouraged by Recess). It wouldn't be alphabetical, but some might argue that it's "best practice" to organize them in this manner. Recess will also point out other issues with your CSS, which is a good thing :-)

    2 points
  • alex newmanalex newman, almost 5 years ago

    As mentioned, CSSComb would be a good starting point, define your own sort order in the config to be alphabetical and then run CSSComb on your stylesheets, although there is a few issues with how it handles LESS and SASS. An alternative would be to highlight the properties and go to Edit > Sort Lines, you can't do this for the full file, but once you sort it and get the hang of coding alphabetically it will come natural to you when coding.

    0 points
  • alex newmanalex newman, almost 5 years ago

    As mentioned, CSSComb would be a good starting point, define your own sort order in the config to be alphabetical and then run CSSComb on your stylesheets, although there is a few issues with how it handles LESS and SASS. An alternative would be to highlight the properties and go to*Edit > Sort Lines*, you can't do this for the full file, but once you sort it and get the hang of coding alphabetically it will come natural to you when coding.

    0 points
    • Per VPer V, almost 5 years ago

      Regarding LESS/SASS. If you're using CSSComb just to make you code look "beautiful" for you compiled CSS it shouldn't be an issue if you run Comb after you've compiled your LESS/SASS. If you're doing it to structure your LESS/SASS files, then issues may/will arise.

      On a side note: I prefer to group/sort my declarations byt type (starting with positioning, then display and so on...).

      0 points
      • alex newmanalex newman, almost 5 years ago

        Yeh that's what I'm talking about, it's mainly issues based around nested classes and parent selector within the actual LESS & SASS files.

        0 points