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

.stylelintrc

 {
   "syntax": "scss",
   "plugins": [
-    "stylelint-selector-bem-pattern"
+    "stylelint-selector-bem-pattern",
+    "stylelint-order"
   ],
   "rules": {
+    # Проверка совпадения селектора и имени файла, БЭМ-ошибок
     # https://github.com/postcss/postcss-bem-linter#custom-patterns
     "plugin/selector-bem-pattern": [{
       "implicitComponents": true,
@@ -33,6 +35,47 @@
       "severity": "warning",
       "message": "Селектор не из имени файла или БЭМ-ошибка"
     }],
+    # Проверка очередности в контексте селектора
+    "order/order": [
+      # Кастомные свойства
+      "custom-properties",
+      # Инклуды примесей
+      {
+        "type": "at-rule",
+        "name": "include",
+      },
+      # Свойства
+      "declarations",
+      # Медиаусловия
+      {
+        "type": "at-rule",
+        "name": "media",
+      },
+      # Псевдоселекторы и псевдоэлементы
+      {
+        "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]+"
+      },
+    ],
     # http://stylelint.io/user-guide/rules/
     "color-hex-case": ["lower", {
       "severity": "warning",

README.md

@@ -10,21 +10,23 @@
 - Список pug-примесей `src/pug/mixins.pug` генерируется автоматически, содержит `include` существующих pug-файлов всех блоков.
 - Диспетчер подключения стилей `src/scss/style.scss` генерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов.
 - Входная точка обработки js (`src/js/entry.js`) генерируется автоматически, содержит `require` js-файлов использованных в разметке блоков и доп. файлов.
-- Перед созданием коммита запускается проверка индексированных файлов. При ошибках коммит не происходит, ошибки выводятся в терминал.
+- Используется относительно жёсткий кодгайд.
+- Перед созданием коммита происходит проверка индексированных файлов. При ошибках коммит не происходит, ошибки выводятся в терминал.
 - Есть механизм быстрого создания нового блока: `node createBlock.js new-block` (создаёт папки и scss-файл). После имени нового блока можно дописать нужные расширения.
 
 
 ## Команды
 
-`npm start` — запуск сервера разработки (сборка **без библиотеки блоков**).
-
-`npm run build` — сборка **без библиотеки блоков** и без запуска сервера разработки.
-
-`npm run wlib` — запуск сервера разработки (сборка проекта с библиотекой блоков).
-
-`npm run test` — проверка всех pug-, scss- и js-файлов на соответствие правилам (см. `.pug-lintrc`, `.stylelintrc` и `eslintrc` соответственно).
-
-`npm run deploy` — cборка проекта (с библиотекой) и отправка содержимого папки сборки на gh-pages (не сработает, если проект не имеет репозитория на github.com).
+```bash
+npm start # запуск сервера разработки (сборка БЕЗ библиотеки блоков)
+npm run build # сборка БЕЗ библиотеки блоков и без запуска сервера разработки
+npm run wlib # запуск сервера разработки (сборка проекта с библиотекой блоков)
+npm run deploy # cборка проекта (с библиотекой) и отправка содержимого папки сборки на gh-pages (нужен репозиторий на github.com)
+npm run test # проверка всех pug-, scss- и js-файлов на соответствие правилам (см. .pug-lintrc, .stylelintrc и eslintrc соответственно)
+npm run test:pug # проверить только pug-файлы
+npm run test:style # проверить только scss-файлы
+npm run test:js # проверить только js-файлы
+```
 
 
 ## Структура

package.json

@@ -71,6 +71,7 @@
     "postcss-object-fit-images": "^1.1.2",
     "pug-lint": "^2.5.0",
     "stylelint": "^9.1.1",
+    "stylelint-order": "^2.0.0",
     "stylelint-selector-bem-pattern": "^2.0.0",
     "through2": "^3.0.0",
     "vinyl-buffer": "^1.0.1",

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

@@ -81,8 +81,8 @@
     }
 
     &::-webkit-slider-thumb {
-      margin-top: -0.68em;
       @include field-range-slider-thumb; // локальная примесь!
+      margin-top: -0.68em;
     }
 
     &::-moz-range-thumb {

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

@@ -146,11 +146,11 @@
     background: none;
     border: none;
 
-    .no-js & {
+    @media (min-width: $menu-desktop-width) {
       display: none;
     }
 
-    @media (min-width: $menu-desktop-width) {
+    .no-js & {
       display: none;
     }
   }

src/blocks/off-canvas/off-canvas.scss

@@ -11,6 +11,31 @@ $off-canvas-width:            250px !default; // ширина этого бло
   position: relative;
   overflow: hidden;
 
+  .js &--open {
+
+    #{$block-name}__overlay {
+      position: fixed;
+      z-index: 1;
+      opacity: 1;
+      visibility: visible;
+      transition: opacity $transition-time ease;
+    }
+
+    #{$block-name}__close {
+      z-index: 1;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    #{$block-name}__aside {
+      transform: translateX(0);
+    }
+
+    #{$block-name}__page-content {
+      transform: translateX($off-canvas-width);
+    }
+  }
+
   &__aside {
     max-height: 30vh;
     overflow-y: auto;
@@ -75,31 +100,4 @@ $off-canvas-width:            250px !default; // ширина этого бло
     opacity: 0;
     visibility: hidden;
   }
-
-
-
-  .js &--open {
-
-    #{$block-name}__overlay {
-      position: fixed;
-      z-index: 1;
-      opacity: 1;
-      visibility: visible;
-      transition: opacity $transition-time ease;
-    }
-
-    #{$block-name}__close {
-      z-index: 1;
-      opacity: 1;
-      visibility: visible;
-    }
-
-    #{$block-name}__aside {
-      transform: translateX(0);
-    }
-
-    #{$block-name}__page-content {
-      transform: translateX($off-canvas-width);
-    }
-  }
 }

src/blocks/tabs/tabs.scss

@@ -17,18 +17,20 @@
     flex-wrap: wrap;
     align-items: flex-end;
 
-    .no-js & {
-      display: none;
-    }
-
-    @media (min-width: $screen-md) {
-
     &:after {
       content: '';
+      display: none;
       flex-grow: 1;
       height: 1px;
       background-color: $border-color;
+
+      @media (min-width: $screen-md) {
+        display: block;
+      }
     }
+
+    .no-js & {
+      display: none;
     }
   }