New Chrome Extension for BEM Compliance Support in Development Projects

[nxpatterns]

Dear BEM Team,

As an Enterprise Software Architect, I deeply appreciate your efforts to standardize CSS through BEM, generously sharing your expertise and ideas with the community. I aim to contribute by developing a Chrome Extension designed to assist developers in identifying and correcting non-BEM-compliant styles during the development phase, before minification and uglification.

Ensuring adherence to naming conventions is crucial in my projects, yet supervising every developer's compliance is impractical. With no adequate tools currently available (e.g., within VSCode) for this purpose, I dedicated a weekend to creating a lightweight extension, which I've now made available to the community.

I would be honored if you could review the extension to assess its practical utility. Your feedback, whether suggestions for improvement or confirmation of its initial readiness, would be invaluable. Should you find it satisfactory, I am also considering developing a corresponding VSCode extension.

Thank you very much for any feedback, positive or negative. :)

Best regards

Chrome Extension: Non-compliant Style Finder

[nxpatterns]

To summarise succinctly, here is the underlying regular expression I've employed in the extension:

    /^[a-z\d]+(?:-[a-z\d]+)*(?:--[a-z\d]+)*(?:__[a-z\d]+)*(?:-[a-z\d]+)*$/

You might find it useful to test whether it delivers the required results for ensuring BEM compliance.

Acceptable Patterns:

• Lowercase with Hyphens: Ensures a seamless blend, like mat-mdc-input-element.
• Double Hyphens for Variants: Distinctively marks variants, for instance, mdc-button--raised.
• Double Underscores for Sub-elements: Defines elements within a block, e.g., mdc-button__ripple.
• Compound Variants: Allows for detailed specification of variants, such as mdc-floating-label--float-above.

Unacceptable Patterns:

• CamelCase: Use btn-wrapper instead of btnWrapper.
• Capital Letters at Start: Opt for a lowercase start instead of BtnWrapper or Btn-wrapper.
• Mixed Separators: Prefer mdc-button__label to mdc_button-label.
• Repeated Separators: Use mdc-button instead of mdc--button or mdc__button.

[3xploiton3]

https://getbem.com/

Non-compliant classes and IDs:

(14) ['astro-5SOCBQWG', 'astro-3IS37TAF', 'sm:px-6', 'md:grid-cols-2', 'bg-white/50', 'astro-6D3A7FNM', 'astro-65UMGXAR', 'astro-3YYYFQEL', 'astro-JC5I46ZI', 'astro-UXNKDZ4E', 'md:flex', 'md:items-center', 'md:justify-between', 'md:py-8']

[nxpatterns]

This Style Checker is utilized during the development phase to detect inconsistent class and ID names within your project when you're running your projects locally or are in development mode. Production apps undergo "minifying" and "uglifying" processes, resulting in CSS styles that naturally won't adhere to naming conventions.