CSS combing

Hi,

First sorry for my bad english 😃

I really love your project but I notices something that bothers me a bit: the CSS properties order is sometimes strange and could be fixed with a tool like CSScomb

For example : here you could reorder this :

pre {
  max-height: var(--pre-max-height);
  overflow-y: auto;
  font-family: var(--font-family-monospace);
  color: var(--pre-color);
  background-color: var(--pre-bg-color);
  border-radius: var(--pre-border-radius);
  padding: 1rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

into this :

pre {
  overflow-y: auto;
  max-height: var(--pre-max-height);
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem;
  color: var(--pre-color);
  border-radius: var(--pre-border-radius);
  background-color: var(--pre-bg-color);
  font-family: var(--font-family-monospace);
}

And that would be even geater 😃

[thomasbritton]

Personally, I think just sorting the properties alphabetically would be the best option if you really want to spend the time putting an ordering system in place. It’s the simplest option to update the existing source code to and will be the most universally understood ordering.

But at the end of the day, I don’t think people should be editing the CSS provided from Shoelace anyway, it’s meant to be a reset/normalise framework and if you need/want to make adjustments you should do so outside of the core CSS so it doesn’t really matter how you order the properties, not to mention that all of the projects CSS should be minified anyway so what benefit is it really giving the user?

This is certainly one of those ‘Nice to haves’ rather than being a ‘Should have’.

[raphaelgoetter]

Found a better resource for orders : https://github.com/csscomb/csscomb.js/tree/master/config