Добавить проверку классов на соответствие БЭМ-синтаксису

[efiand]

Предлагаю добавить проверку на соответствие названий классов БЭМ-синтаксису. Просто kebab-case тоже поддержит.

Источник.

Пример из .stylelintrc.cjs (такой вариант названия и формата точно подхватится расширением для VS Code):

module exports = {
  "rules": {
    "selector-class-pattern": [
      "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)*(?:\[.+\])?$",
      {
        resolveNestedSelectors: true,
        message: function expected(selectorValue) {
          return `Expected class selector "${selectorValue}" to match BEM CSS pattern https://en.bem.info/methodology/css. Selector validation tool: https://regexr.com/3apms`;
        }
      }
    ]
  }
};

[nikolai-shabalin]

Мы для этого используем bem-linter. Как раз можно проверить из терминала и с помощью ci

[efiand]

Удобная штука, но она для разметки. Для стилей встречал пакет, но он почему-то не заработал у меня.

CLI на пре-коммите нужен, но проверка в моменте важна прежде всего для студента (чтобы било по рукам, а не приводило к накоплению антипривычек и сюрпризов перед пушем) - поэтому хорошо использовать что-то для вотчеров или в качестве редактора. Предложенный вариант работает по крайней мере с плагином stylelint на VS Code

[firefoxic]

Нейминг — наименьшая из проблем, и его проверки хватает и на стадии коммита/пуша/etc. Вот чего студентам во время написания кода надо, так это хлыст, шлёпающий при попытке писать классы блоков и их элементов и модификаторов в файлах других блоков.

Я как тот «хлыст» на первых же стилевых файлах «порку» своим устраивал, чтобы под конец не было мучительно больно разрезать зависимости блоков друг от друга.

Такого плагина мне пока не удалось найти. Проверял вручную всегда, включая в левой колонке vscode секцию Outline, и пробегаясь глазами по селекторам. И так в каждом стилевом файле 🫨