Sorting CSS Properties into an Arbitrary Order

How important is CSS property order?

Apparently the order does not have any direct impact on the result.
The subject has been mentioned here: http://css-tricks.com/new-poll-how-order-css-properties/

It does have an impact according to here: http://css-tricks.com/ordering-css3-properties/

And here is another trend: http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/

Final verdict: Arrange the way you judge best, it will work.

What's the best tool to automatically organize or alphabetize your CSS properties?

Try this:

http://www.cleancss.com/

Haven't used it, but it appears to do what you say.

Bob

Conventional Order of CSS properties

There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.

What is stylelint's default properties order within a block?

It is simply alphabetic (A-Z). Therefore, for avoiding the stylelint warnings, the properties in that block should be ordered like this:

.my-class {
  background: #dadada;
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

However with SASS interpolation, it is possible to do disregard this order enforcement like this:

$bg: background;

.my-class {
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
  #{bg}: #dadada;
}

---

Related Topics