selector-class-pattern doesn't match BEM

[mikeselander]

In the WordPress stylelint standards version 16.0.0, the selector-class-pattern was updated, but it doesn't allow for BEM naming patterns which can cause a huge quantity of stylelint errors.

I propose that we either remove the rule, or add a BEM-specific pattern in our ruleset and allow project to overrule this rule individually. I tried this rule out on a project when testing the upgrade for them and it works nicely in almost all situations: postcss/postcss-bem-linter#82 (comment)

[ntwb]

Yeah, it was broken previously, happy to roll in any proposed changes for this though, can possibly work with the Gutenberg team to discuss this further and come up with a scheme that works for all

[mikeselander]

happy to roll in any proposed changes for this though, can possibly work with the Gutenberg team to discuss this further and come up with a scheme that works for all

Updating this to work for BEM in the core standards would definitely be best! What naming convention/style is it supposed to be supporting now?

The link in the first comment works reasonably well and I would propose something along those lines. I've looked into some more in-depth BEM naming rules but they seem to involve a dev setting up some configuration for each project which isn't great.

[ntwb]

The Gutenberg docs for this are at:

https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md

To avoid class name collisions, class names must adhere to the following guidelines, which are loosely inspired by the BEM (Block, Element, Modifier) methodology.

All class names assigned to an element must be prefixed with the name of the package, followed by a dash and the name of the directory in which the component resides. Any descendent of the component's root element must append a dash-delimited descriptor, separated from the base by two consecutive underscores __.

Root element: package-directory
Child elements: package-directory__descriptor-foo-bar

The root element is considered to be the highest ancestor element returned by the default export in the index.js. Notably, if your folder contains multiple files, each with their own default exported component, only the element rendered by that of index.js can be considered the root. All others should be treated as descendents.

I'd suspect the relatively new #core-css team and @peterwilsoncc would have opinions

[alTach]

this answer for you question

[a-tokyo]

I used the vanilla rule with a bit of custom config and it works perfectly:

  rules: {
    /** selector class pattern must match [BEM CSS](https://en.bem.info/methodology/css) - [Regex](https://regexr.com/3apms) */
    'selector-class-pattern': [
      '^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
      {
        /** This option will resolve nested selectors with & interpolation. - https://stylelint.io/user-guide/rules/selector-class-pattern/#resolvenestedselectors-true--false-default-false */
        resolveNestedSelectors: true,
        /** Custom message */
        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`;
        },
      },
    ],
  },