Make the things that make our products look pretty, look pretty!

Using !important is very bad practise. Please do not do it.

If you run stylelint in your project, and you are presented with an enormous amount of errors because of !importants, please do not add a eslint-disable-next-line or disable the rule for entire files.

Instead, overwrite the declaration-no-important rule in your .stylelintrc in the project, and set the severity to warning.

We have extended stylelint-config-clean-order which is a config for stylelint-order. This package does what you expect it to do.

In our own config we've overwritten the sorting of just the selectors (blocks). Since regular expressions are a bit hard to read sometimes, here's the sorting as we've configured it:

.parentClass {
  @media #{$normal} {
  }

  &:hover {
  }

  &__foo {
  }

  &--bar {
  }

  &.active {
  }

  div {
  }
  
  .childClass {
  }
}