Support for linting BEM selectors without component definition?

Background: I have an existing project using scss-lint which I’m migrating to stylelint for faster performance. One of the things I want to lint is selector format in which I’m following the Harry Roberts convention (originally described here)

The Ask: The way that postcss-bem-linter is written, it requires a “component definition” in order for the linter to check anything. My concern is that this represents an opt-in scenario for developers. If they never setup a component definition then their selectors will never be linted.

Using postcss-bem-linter, is it possible to just check that all selectors conform to the general pattern for naming (block__element--modifier) according to the convention above but without a component definition?

The Followup: Where does this concept of a “component definition” come from? I haven’t been able to find any documentation on its use with BEM apart from the postcss-bem-linter README.

[bookwyrm]

@davidtheclark Thanks for the quick response. I think that your suggestion is a good one - I overlooked selector-class-pattern when I found your stylelint-selector-bem-pattern.

I added a rule:

    "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]+)*)?(?:\\[.+\\])?$",

It’s petty gnarly but it works.

For now though I’m going to shelve the migration to stylelint as it isn’t as feature-rich as scss-lint. The main things I’ve come across that I’m missing are:

• ColorVariable
• DeclarationOrder
• Indentation - with support for visual hints of hierarchy

I’ll see about adding plugins to stylelint for the above features as I have time.

[jitendravyas]

@bookwyrm Is it for Harry potter’s BEM style?

"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]+)*)?(?:\\[.+\\])?$"

.block {}
.block__element {}
.block--modifier {}