Introduce csscomb

[vast]

CSSComb is a tool for placing CSS properties in any specific order, so you won't have issues with double properties declarations.

Let me explain it with example:

.score {
  position: relative;
  float: left;
  margin: 13px 0;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 20px;
  z-index: 10;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  font-size: 16px;
}

A developer may not spot the last font-size declaration and have an issue with element font-size. If properties are ordered:

.score {
  position: relative;
  z-index: 10;

  float: left;

  margin: 13px 0;

  text-align: center;
  vertical-align: middle;

  border-radius: 20px;
  background-color: #fff;

  font-size: 12px;
  font-size: 16px;
  line-height: 14px;
}

It's easy to spot duplicates font-size properties. It also helps in understanding how this particular code is styled. A developer sees clearly that this is a relatively positioned floating block.

At the same time, we should not include csscomb in our build process because it has some issues (see fs/static-base#56 (comment)). Instead we should rely on scss-lint.

If there is a need in violating sorting rules it can be disabled with:

// scss-lint:disable DuplicateProperty, PropertySortOrder
.foo {
  background: image-url("fallback.png") center center / cover; // IE9 fallback
  background: linear-gradient(to right, $charts-red, $charts-green 95%);
  color: $charts-green;
}

/cc @timurvafin, @rustemginiyatullin, @mikheevdmitry

[rustemginiyatullin]

🍕 👍

[dzhebtest]

👍

[timurvafin]

It will be great to have link to this pull request with such great description!

[vast]

thanks, fixed

[timurvafin]

👍