selector-class-pattern

Specify a pattern for class selectors.

    .foo, #bar.baz span, #hoo[disabled] { color: pink; }
/** ↑         ↑
 * These class selectors */

This rule ignores non-outputting Less mixin definitions and called Less mixins.

Escaped selectors (e.g. .u-size-11\/12\@sm) are parsed as escaped twice (e.g. .u-size-11\\/12\\@sm). Your RegExp should account for that.

The message secondary option can accept the arguments of this rule.

Options

Specify a regex string not surrounded with "/".

The selector value after . will be checked. No need to include . in your pattern.

Given:

{
  "selector-class-pattern": "foo-[a-z]+"
}

The following patterns are considered problems:

.foop {}

.foo-BAR {}

div > #zing + .foo-BAR {}

The following patterns are not considered problems:

.foo-bar {}

div > #zing + .foo-bar {}

#foop {}

[foo='bar'] {}

This option will resolve nested selectors with & interpolation. Defaults to false.

Given the string:

{
  "selector-class-pattern": ["^[A-Z]+$", { "resolveNestedSelectors": true }]
}

The following patterns are considered problems:

.A {
  &__B {} /* resolved to ".A__B" */
}

The following patterns are not considered problems:

.A {
  &B {} /* resolved to ".AB" */
}