Stylelint: добавил проверку очередности правил

.stylelintrc

@@ -36,6 +36,7 @@
       "message": "Селектор не из имени файла или БЭМ-ошибка"
     }],
     # Проверка очередности в контексте селектора
+    # https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md
     "order/order": [
       # Кастомные свойства
       "custom-properties",
@@ -53,29 +54,96 @@
       },
       # Псевдоселекторы и псевдоэлементы
       {
-        "emptyLineBefore": "always",
         "type": "rule",
         "selector": "^&:\\w+$"
       },
       # Сторонние вложенные селекторы
       {
-        "emptyLineBefore": "always",
         "type": "rule",
         "selector": "^\\.[-_a-zA-Z0-9]+"
       },
       # Элементы блока
       {
-        "emptyLineBefore": "always",
         "type": "rule",
         "selector": "^&__[-a-z0-9]+"
       },
       # Модификаторы блока
       {
-        "emptyLineBefore": "always",
         "type": "rule",
         "selector": "^&--[-a-z0-9]+"
       },
     ],
+    # Проверка очередности правил
+    # https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-order/README.md
+    "order/properties-order": [[
+      {
+        "properties": [
+          "content",
+          "box-sizing",
+          "display",
+          "flex",
+          "flex-wrap",
+          "flex-basis",
+          "flex-direction",
+          "flex-flow",
+          "flex-grow",
+          "flex-shrink",
+          "align-content",
+          "align-items",
+          "align-self",
+          "justify-content",
+          "order",
+          "grid",
+          "grid-area",
+          "grid-auto-*",
+          "grid-column",
+          "grid-column-*",
+          "grid-gap",
+          "grid-row",
+          "grid-row-*",
+          "grid-template",
+          "grid-template-*",
+          "position",
+          "z-index",
+          "top",
+          "right",
+          "bottom",
+          "left",
+          "width",
+          "min-width",
+          "max-width",
+          "height",
+          "min-height",
+          "max-height",
+          "overflow",
+          "overflow-*",
+          "margin",
+          "margin-*",
+          "border",
+          "border-*",
+          "padding",
+          "padding-*",
+        ]
+      },
+      {
+        # "emptyLineBefore": "always",
+        "properties": [
+          "transform",
+          "transform-*",
+          "backface-visibility",
+          "perspective",
+          "perspective-origin",
+          "transition",
+          "transition-*",
+          "animation",
+          "animation-*",
+        ]
+      },
+    ],
+      {
+        "severity": "warning",
+      }
+    ],
     # http://stylelint.io/user-guide/rules/
     "color-hex-case": ["lower", {
       "severity": "warning",

src/blocks/alert/alert.scss

@@ -4,9 +4,9 @@
 
 .alert {
   position: relative;
-  padding: 0.7em 1.5em 0.7em 1.4em;
   margin-top: $typo-margin-vertical;
   margin-bottom: $typo-margin-vertical;
+  padding: 0.7em 1.5em 0.7em 1.4em;
   border-radius: $border-radius;
   color: $text-color;
   background-color: lighten($color-warning, 30%);

src/blocks/baron/baron.scss

@@ -13,14 +13,14 @@
   overflow: hidden;
 
   &__scroller {
-    overflow-y: scroll;
     box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
     margin: 0;
     border: 0;
     padding: 0;
     padding-right: $scrollbar-width;
-    width: 100%;
-    height: 100%;
     -webkit-overflow-scrolling: touch; // remove line to customize scrollbar in iOs
 
     &::-webkit-scrollbar {
@@ -30,13 +30,13 @@
   }
 
   &__track {
-    opacity: 0;
     position: absolute;
     z-index: 3;
     top: 0;
-    bottom: 0;
     right: 0;
+    bottom: 0;
     width: $scrollbar-width;
+    opacity: 0;
     background-color: $gray-lightest;
 
     #{$block-name}--scrollbar & {
@@ -47,17 +47,17 @@
   &__free {
     position: absolute;
     top: 0;
-    bottom: 0;
     right: 0;
+    bottom: 0;
   }
 
   &__bar {
+    box-sizing: border-box;
     display: none;
     position: absolute;
-    left: ($scrollbar-width * -1 + 1);
     z-index: 1;
+    left: ($scrollbar-width * -1 + 1);
     width: ($scrollbar-width - 2);
-    box-sizing: border-box;
     opacity: 1;
     pointer-events: auto;
     background: $gray-lighten;

src/blocks/breadcrumbs/breadcrumbs.scss

@@ -3,10 +3,10 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .breadcrumbs {
-  padding: 0;
   list-style: none;
   margin-top: $typo-margin-vertical;
   margin-bottom: $typo-margin-vertical;
+  padding: 0;
   color: $text-color;
 
   a {

src/blocks/btn/btn.scss

@@ -6,11 +6,14 @@
   box-sizing: border-box;
   display: inline-block;
   max-width: 100%;
-  vertical-align: middle;
+  overflow: hidden;
   margin: 0;
+  border-radius: $border-radius;
+  // border: 1px solid $gray-lighter;
+  border: 0;
   padding: $field-padding-vertical  $field-padding-horizontal;
+  vertical-align: middle;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
   text-align: center;
@@ -20,9 +23,6 @@
   text-decoration: none;
   text-transform: none;
   color: $text-color;
-  border-radius: $border-radius;
-  // border: 1px solid $gray-lighter;
-  border: 0;
   background-color: $gray-lightest;
   background-image: none;
   cursor: pointer;

src/blocks/burger/burger.scss

@@ -3,23 +3,23 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .burger {
+  display: inline-block;
   position: relative;
   z-index: 1;
-  display: inline-block;
-  padding: 0;
   width: 30px;
+  border: none;
+  padding: 0;
   line-height: 30px;
   background: transparent;
-  border: none;
   user-select: none;
   cursor: pointer;
 
   > span { // stylelint-disable-line  selector-combinator-blacklist
-    position: relative;
     display: inline-block;
-    vertical-align: middle;
+    position: relative;
     width: 100%;
     height: $toggler-part-height;
+    vertical-align: middle;
     font-size: 0;
     color: transparent;
     background: $toggler-part-bg-color;
@@ -54,8 +54,8 @@
 
       &:before,
       &:after {
-        transition: top $transition-time, transform $transition-time $transition-time;
         top: 0;
+        transition: top $transition-time, transform $transition-time $transition-time;
       }
 
       &:before {

src/blocks/close/close.scss

@@ -3,23 +3,23 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .close {
+  display: inline-block;
   position: relative;
   z-index: 1;
-  display: inline-block;
-  padding: 0;
   width: 30px;
+  border: none;
+  padding: 0;
   line-height: 30px;
   background: transparent;
-  border: none;
   user-select: none;
   cursor: pointer;
 
   span {
-    position: relative;
     display: inline-block;
-    vertical-align: middle;
+    position: relative;
     width: 100%;
     height: $toggler-part-height;
+    vertical-align: middle;
     font-size: 0;
     color: transparent;
     background: transparent;

src/blocks/code/code.scss

@@ -5,23 +5,23 @@
 .code {
   display: block;
   width: 100%;
-  max-height: rem(500px);
+  max-height: 500px;
   margin-top: $typo-margin-vertical;
   margin-bottom: $typo-margin-vertical;
-  padding: 0.5rem 1rem;
-  overflow-x: auto;
-  background-color: $gray-lightest;
   border-radius: $border-radius;
   border: 1px solid $gray-lighter;
+  padding: 0.5em 1em;
+  overflow-x: auto;
+  background-color: $gray-lightest;
   white-space: normal;
   tab-size: 2;
 
   code {
     display: block;
+    min-height: 1em;
     padding: 0;
     white-space: pre;
     background-color: transparent;
-    min-height: 1em;
 
     p,
     div {

src/blocks/embed-responsive/embed-responsive.scss

@@ -3,13 +3,13 @@
 // Не пишите здесь другие селекторы.
 
 .embed-responsive {
-  position: relative;
   display: block;
+  position: relative;
   width: 100%;
+  overflow: hidden;
   margin-top: $typo-margin-vertical;
   margin-bottom: $typo-margin-vertical;
   padding: 0;
-  overflow: hidden;
 
   &::before {
     content: '';

src/blocks/field-checkbox/field-checkbox.scss

@@ -32,8 +32,8 @@
   }
 
   &__name {
-    position: relative;
     display: inline-block;
+    position: relative;
     padding-left: 1.5em;
     margin-right: 0.6em;
     font-weight: 400;
@@ -117,8 +117,8 @@
     position: absolute;
     top: 0.7em;
     left: 0;
-    padding: 0;
     margin: 0;
+    padding: 0;
     transform: translateY(-50%);
 
     &:focus,

src/blocks/field-file/field-file.scss

@@ -31,15 +31,15 @@
   }
 
   &__name-text {
-    position: relative;
     display: flex;
     align-items: baseline;
+    position: relative;
     width: 100%;
-    background-color: #fff;
+    overflow: hidden;
     border: 1px solid $border-color;
     border-radius: $border-radius;
+    background-color: #fff;
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
 

src/blocks/field-radio/field-radio.scss

@@ -32,10 +32,10 @@
   }
 
   &__name {
-    position: relative;
     display: inline-block;
-    padding-left: 1.5em;
+    position: relative;
     margin-right: 0.6em;
+    padding-left: 1.5em;
     font-weight: 400;
     line-height: $line-height;
   }
@@ -115,8 +115,8 @@
     position: absolute;
     top: 0.8em;
     left: 0;
-    padding: 0;
     margin: 0;
+    padding: 0;
     transform: translateY(-50%);
 
     &:focus,

src/blocks/field-range/field-range.scss

@@ -11,17 +11,17 @@
   }
 
   &__input-wrap {
-    position: relative;
     display: block;
+    position: relative;
   }
 
   &__input {
     align-self: center;
-    padding: 0;
     width: 100%;
     height: 2em;
     border-radius: 0.25em;
     border: 0;
+    padding: 0;
     background: none;
     font-size: inherit;
     cursor: pointer;
@@ -70,14 +70,14 @@
     // Да, да, и это — локальная примесь.
     @mixin field-range-slider-thumb {
       box-sizing: border-box;
-      padding: 0;
       width: 2em;
       height: 2em;
+      border: 1px solid $border-color;
       border-radius: 1em;
+      padding: 0;
       box-shadow: none;
       cursor: ew-resize;
       background: $gray-lightest;
-      border: 1px solid $border-color;
     }
 
     &::-webkit-slider-thumb {

src/blocks/field-select/field-select.scss

@@ -100,8 +100,8 @@
     position: absolute;
     top: 7px;
     right: 16px;
-    height: 14px;
     width: 14px;
+    height: 14px;
     border-left: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
     pointer-events: none;
@@ -118,9 +118,9 @@
   }
 
   &__inner {
-    padding: $field-padding-vertical 40px $field-padding-vertical $field-padding-horizontal;
     border: 1px solid $border-color;
     border-radius: $border-radius;
+    padding: $field-padding-vertical 40px $field-padding-vertical $field-padding-horizontal;
     background: #fff;
     font-size: 1em;
     line-height: 1.5;
@@ -136,16 +136,16 @@
 
   &__list--dropdown {
     display: none;
-    z-index: 1;
     position: absolute;
-    width: 100%;
-    background-color: #fff;
-    border: 1px solid $border-color;
+    z-index: 1;
     top: 100%;
+    width: 100%;
+    overflow: hidden;
     margin-top: -1px;
+    border: 1px solid $border-color;
     border-bottom-left-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
-    overflow: hidden;
+    background-color: #fff;
     word-break: break-all;
 
     #{$block-name}__item {

src/blocks/field-text/field-text.scss

@@ -22,14 +22,14 @@
     vertical-align: middle;
     width: 100%;
     // height: 2.125em;
-    padding: $field-padding-vertical  $field-padding-horizontal;
     margin: 0;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    padding: $field-padding-vertical  $field-padding-horizontal;
     line-height: $line-height;
     font-size: 1em;
     font-family: inherit;
     background-color: #fff;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
     appearance: textfield;
 
     &:focus {

src/blocks/field-toggler/field-toggler.scss

@@ -33,8 +33,8 @@
   }
 
   &__name {
-    position: relative;
     display: inline-block;
+    position: relative;
     padding-left: 3.2em;
     margin-right: 0.6em;
     font-weight: 400;

src/blocks/form/form.scss

@@ -6,9 +6,9 @@
 
   &__fieldset {
     min-width: 0;
-    padding: 0;
     margin: 0;
     border: 0;
+    padding: 0;
 
     &:not(:last-child) {
       margin-bottom: $typo-margin-vertical;

src/blocks/main-nav/main-nav.scss

@@ -21,8 +21,8 @@
       // открытие/закрытие меню только в случае работающего JS
 
       .js & {
-        overflow: hidden;
         max-height: 0;
+        overflow: hidden;
         transition: max-height 0.2s;
       }
 
@@ -93,11 +93,11 @@
 
       @media (min-width: $menu-desktop-width) {
         position: absolute;
+        z-index: 1;
         top: 100%;
         left: 0;
-        z-index: 1;
-        opacity: 0;
         height: 0;
+        opacity: 0;
         overflow: hidden;
         transition: opacity $transition-time;
 
@@ -142,9 +142,9 @@
 
   &__toggler {
     display: inline-block;
+    border: none;
     padding: 0;
     background: none;
-    border: none;
 
     @media (min-width: $menu-desktop-width) {
       display: none;

src/blocks/modal/modal.scss

@@ -11,13 +11,13 @@
   $block-name:                &; // #{$block-name}__element
 
   display: none;
-  overflow: hidden;
   position: fixed;
+  z-index: $z-index-modal;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: $z-index-modal;
+  overflow: hidden;
   -webkit-overflow-scrolling: touch;
 
   .js-modal-open & {
@@ -26,10 +26,10 @@
   }
 
   &__dialog {
+    flex-shrink: 0;
     position: relative;
-    margin: 0;
     width: 100%;
-    flex-shrink: 0;
+    margin: 0;
 
     @media (min-width: $screen-lg) {
       width: 600px;
@@ -46,9 +46,9 @@
   }
 
   &__content {
-    position: relative;
     display: flex;
     flex-direction: column;
+    position: relative;
     min-width: 100%;
     min-height: 100%;
     background-color: #fff;
@@ -56,8 +56,8 @@
   }
 
   &__header {
-    padding: 0 40px 0 15px;
     flex-shrink: 0;
+    padding: 0 40px 0 15px;
   }
 
   &__title {
@@ -76,22 +76,22 @@
   }
 
   &__body {
-    padding: 0 15px;
     flex-grow: 1;
+    padding: 0 15px;
   }
 
   &__footer {
-    padding: 15px;
     flex-shrink: 0;
+    padding: 15px;
   }
 
   &__backdrop {
     position: fixed;
+    z-index: ($z-index-modal - 1);
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: ($z-index-modal - 1);
     background-color: rgba(0, 0, 0, $opacity);
 
     @media (min-width: $screen-lg) {

src/blocks/pagination/pagination.scss

@@ -10,9 +10,9 @@
 
   &__item {
     display: block;
-    padding: 0.5em;
     min-width: 2.5em;
     border: 1px solid $border-color;
+    padding: 0.5em;
     text-decoration: none;
     text-align: center;
     color: $text-color;

src/blocks/table-responsive/table-responsive.scss

@@ -3,18 +3,18 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .table-responsive {
+  width: 100%;
   margin-top: $typo-margin-vertical;
   margin-bottom: $typo-margin-vertical;
   border-collapse: collapse;
   border: 1px solid $border-color;
-  width: 100%;
 
   caption {
     caption-side: top;
     text-align: left;
-    padding: 0.4em $field-padding-horizontal;
     border: 1px solid $border-color;
     border-bottom: 0;
+    padding: 0.4em $field-padding-horizontal;
     font-size: $font-size--small;
     line-height: 1em;
     color: $text-color--muted;
@@ -64,9 +64,9 @@
         border-left: 0 !important; // stylelint-disable-line  declaration-no-important
 
         &:before { // stylelint-disable-line  max-nesting-depth
+          content: attr(data-label);
           display: block;
           font-weight: 700;
-          content: attr(data-label);
         }
       }
     }

src/blocks/tabs/tabs.scss

@@ -10,12 +10,12 @@
   margin-bottom: $typo-margin-vertical;
 
   &__links {
-    margin: 0;
-    padding: 0;
-    list-style: none;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 
     &:after {
       content: '';
@@ -36,8 +36,8 @@
 
   &__link-wrap {
     position: relative;
-    border: 1px solid $border-color;
     margin: 0 0.3em 0.3em 0;
+    border: 1px solid $border-color;
     color: $text-color--muted;
 
     @media (min-width: $screen-md) {
@@ -76,8 +76,8 @@
 
   &__content-wrapper {
     display: block;
-    padding: $field-padding-vertical $field-padding-horizontal;
     border: 1px solid $border-color;
+    padding: $field-padding-vertical $field-padding-horizontal;
 
     @media (min-width: $screen-md) {
       border-top: none;

src/blocks/to-top/to-top.scss

@@ -9,9 +9,9 @@ $transition-time:             0.3s !default;
   $block-name:                &; // #{$block-name}__element
 
   position: fixed;
+  z-index: 99;
   right: 1rem;
   bottom: 1rem;
-  z-index: 99;
   width: 3rem;
   height: 3rem;
   border-radius: 50%;