Sublime Forum

Sort CSS selectors alphabetically

#1

I have searched this for hours and cannot find any solution…

How do I sort all / selected CSS selectors like id and class? ( not properties )
For example:

.b {
//
}

.a {
//
}

.d {
//
}

.c {
//
}

It should be:

.a {
//
}

.b {
//
}

.c {
//
}

.d {
//
}

Cannot find any setting / packages / tools… Even outside the editor like online or competitor like VS code also cannot achieve this…

0 Likes

#2

They are not equivalent. The order does matter so it makes no sense to sort it.

<style>
  .b {
    color: blue;
  }
  .a {
    color: red;
  }
</style>
<p class="a b">test</p>

Try to move .a to before .b and see what will happen.

1 Like

#3

Hi, I have already consider this before. But at least to me, this will not happens.

Beause I always style the element very specifically. There is almost no situation where I will have two selectors with the same property on one element.

Why do you need .b and .a with the same properties color on one element? If I need the color on the element with ‘blue’, then I will have the .b on the element only.

Unless you have no control over the stylesheet and need to override it, but then sorting it alphabetically doesn’t affect the original ( the one you cannot write ) stylesheet.

1 Like

#4

But that’s you. For a production tool, it must be considered as “wrong” or at least dangerous. So I can image that people are not interesting in implementing it.

Not saying there is no such tool though. Just saying why people may not be interested in it.

It’s just an easy to understand example to demonstrate “the order is important”.

0 Likes

#5

Apparently I’m asking this for myself and people who are interested in can refer to it. I didn’t mention this is needed / crucial to everyone, why would you say that? Lol

And I already pointed out with an example why sorting it alphabetically doesn’t matter.

0 Likes

#6

Sorry for that. I shouldn’t be serious in this thread. You are right. I am out.

1 Like

#7

It is true that for CSS, order is so paramount its part of its literal name (cascading from most general to most specific) so organizing by alphabetical order, while looking and appearing clean, doesn’t seem like a very needful function. i’m curious if you find a solution!

0 Likes

#8

It’s defnitely true and it’s also a fact that order is important in CSS. But another fact is that the concpet of cascading mostly applied on the @media rule. You don’t want to have mutiple classes with the same property on the same element as I stated before. If that’s the case, eventually you have to optimize your site or just hire a better developer in my honest opinion.

I found a website http://www.lonniebest.com/FormatCSS/ that can alphabetize the style rule, but no one can guarantee that this website will run forever ( it looks outdated and even no SSL ). So I think I will just use my leisure time to learn Python and make myself a plugin.

0 Likes

#9

https://packagecontrol.io/packages/PostCSS%20Sorting

Does this do what you want ?

0 Likes

#10

Hi, I seems to have tried that before, but maybe I think it is capable of sorting the properties only and not the selectors if I’m not mistaken.

0 Likes

#11

I think it will but the plug-in is using an older release. From 5 years ago. You should be able to bump the release and have it working.

0 Likes

#12

Hi, I’m not sure what do you mean by “bump the release”. At least when I install it from the package control and try to run it, nothing happens :frowning: (node.js is installed)

0 Likes

#13

I’ll test tomorrow

1 Like