0

I have a .scss-lint.yml file containing all the rules I want to use in my project.

One thing we enforce in our SCSS is that only classes are targeted, as per BEM documentation.

Because this is not covered in my .scss-lint.yml, it stands currently as a sort of unofficial rule.

It's not immediately obvious from the scss-lint page. Is there some rule I can apply to my YML that will show an error if anything but a classname is used as a selector?

alanbuchanan
  • 3,993
  • 7
  • 41
  • 64

1 Answers1

0

There is the idSelector linter https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#idselector that enforces the use of classes vs Ids in stylesheets.

But if you use BEM, I would advise to enable SelectorFormat and pass in the BEM convention - https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#selectorformat

So your .scss-int.yml would contain

SelectorFormat: enabled: true convention: BEM

and on top of that could use

NameFormat: enabled: true convention: BEM

Every linter is documented here https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#linters

Hope it helps.

Andrei Popa
  • 151
  • 1
  • 5