Find and list non-compliant style classes and IDs in Chrome DevTools Console.

Latest Version

Version

1.0

Update

March 17, 2024

Size

12.85KiB

Developer

Non-compliant Style Finder Extension

Designed for architects and developers who prefer a straightforward approach to CSS naming conventions. This extension is perfect for those committed to creating clean, readable, and scalable stylesheets without compromise.

Simply open the Developer Console with the F12 key and click on the extension icon. Instantly, any non-compliant CSS classes and IDs are revealed as a JavaScript array. You can copy this array to facilitate further automation, such as linting processes.

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.

Enhance your workflow and ensure your stylesheets are easily navigable, upholding the highest coding standards.

Additional Note:

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. This extension is crafted by developers for developers, aiming to streamline and ensure consistency in coding practices before deployment.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "action": { "default_icon": { "128": "images/icon128.png", "16": "images/icon16.png", "48": "images/icon48.png" } }, "background": { "service_worker": "background.js" }, "description": "Find and list non-compliant style classes and IDs in Chrome DevTools Console.", "manifest_version": 3, "name": "Non-compliant Style Finder", "permissions": ["activeTab", "scripting"], "version": "1.0"}

Download CRX(12.85KiB)