У меня есть файл sass-lint.yml со следующим правилом:
class-name-format:
- 1
- convention: '^([a-zA-Z]*)(__[a-z]+)?(-[a-z]*)*(--[a-z]+)?$'
Здесь можно проверить регулярное выражение: https://regex101.com/r/SsVde6/2
К сожалению, я не могу заставить его работать должным образом.
В тестере регулярных выражений вы видите, какие вещи я хочу включить.
Первой частью имени класса может быть PascalCase, с этого момента на BEMified (БЭМ) kebabcase (например: this-is-kebab-case - все строчные буквы с тире между ними)
Очень распространенный паттерн будет выглядеть так:
ComponentName__element-name--modifier-name
Немало вещей уже работает, но я хотел бы также оценить вложенные селекторы БЭМ в моих файлах scss:
Например, &__burgerCross {…} или &__burger_cross или &__burger__cross следует оценивать как ложные. Это должен быть &__burger-cross
Но я действительно не знаю, как обрабатывать вложенные правила.
Любая помощь по sass-lint и regex приветствуется.
@ wp78de ты прав!
@ wp78de Я попробовал ваше предложение, но мне не нужен весь PascalCase после первого слова: Тем временем я придумал следующее: regex101.com/r/PBNJvx/3 Он работает почти во всех случаях, к сожалению, он также включает некоторые из них, которые мы не хотим позволять. В любом случае спасибо за вашу помощь





То, что я хотел, было
I would like to evaluate nested BEM selectors in my scss files as well:
Мое регулярное выражение на самом деле уже выделяло все требуемые случаи, а нежелательные не были сопоставлены. Проблема заключалась в том, что линтер не может линтировать вложенные селекторы БЭМ. :(. Об этом читайте здесь: https://github.com/brigade/scss-lint/issues/339#issuecomment-72404341
Так что здесь мы мало что можем сделать.
Вы думаете, что все знают, что такое «БЭМифицированный шашлык»? Ссылка здесь и там не повредит.